Is there a way to get the height from a style attribute on a div?

<div style="height:100px;"></div>

I can't use .height() as this will just return me the current height of the element - I need to check if the style has been set and then get that height if it has

Is there a way to get the height from a style attribute on a div?

<div style="height:100px;"></div>

I can't use .height() as this will just return me the current height of the element - I need to check if the style has been set and then get that height if it has

• javascript
• jquery

• Isn't the style going to change the height of your element and therefor the same? – putvande Commented Feb 18, 2014 at 10:57
• @putvande: Probably but not necessarily, a style sheet !important rule overrules an inline style (unless the inline style is also !important). Also sometimes a style value is not used by the browser. So it's possible that the style property and the height will be different. – T.J. Crowder Commented Feb 18, 2014 at 11:02
• @putvande I only need to change the height of a div if it has the height set in the style attribute (otherwise it will adjust itself automatically as the height will be auto) – Pete Commented Feb 18, 2014 at 11:07

4 Answers 4

The easiest way is to go straight to the style property:

var heightStyleValue = $("selector for your element")[0].style.height;

You don't want to use jQuery's css function because that will give you the calculated height, not the value from the style object.

Use css() in jquery

$('div').css('height');

I can't use .height() as this will just return me the current height of the element (...)

How is this possible? Unless you're using some !important statements (which you should avoid), the style attribute has higher specificity than anything else in your CSS. Therefore, the height returned by height() should be the same, unless it's constrained by some other container.

However in order to achieve what you want to do, you need to do 2 things:

1. Assign an ID to your div so you can target it in your Javascript

2. Use:

   document.getElementById("yourID").style.height;

You cannot use elem.style.height because the named values of style have default values. If you actually want to know which style parameters has been set, treat style as an array.

Vanilla:

// get style attributes that were actually set on the element
function getStyle(elem,prop) {
    var actuallySetStyles = {};
    for (var i = 0; i < elem.style.length; i++) {
        var key = elem.style[i];
        if (prop == key)
            return elem.style[key];
        actuallySetStyles[key] = elem.style[key];
    }
    if (!prop)
        return actuallySetStyles;
}

console.log(getStyle(elem,'height'));
console.log(getStyle(elem));

jQuery:

jQuery.fn.extend({

    // get style attributes that were set on the first element of the jQuery object
    getStyle: function (prop) {
        var elem = this[0];
        var actuallySetStyles = {};
        for (var i = 0; i < elem.style.length; i++) {
            var key = elem.style[i];
            if (prop == key)
                return elem.style[key];
            actuallySetStyles[key] = elem.style[key];
        }
        if (!prop)
            return actuallySetStyles;
    }
}


console.log(jQuery(elem).getStyle('height'));
console.log(jQuery(elem).getStyle());