Get element's CSS value with Javascript

Question

I'm trying to find a way to get an element's CSS height property, or actually, just tell if a height property is set.

The problem is, when I use

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

I get the display height of the element, but I'm trying to see if the element has a height property that was set in either a class, id, or directly on the div.

Any suggestions?

Answer 1

You can use height also.

$(elem).height(); // to get the height.

Also see this Q/A

if you want to get correct CSS value, i can advise don't use jQuery

if we have HTML:

<div id="elem" style="height: auto"></div>

we can write JS:

$('#elem').get(0).style.height    // "auto"

if we have HTML:

<div id="elem"></div>

JS:

$('#elem').get(0).style.height    // ""

universal function:

var height = function(elem){
      return $(elem).get(0).style.height === "" ? $(elem).height() : $(elem).get(0).style.height;
}

Answer 2

Likely not the best way but I would just look at the outerHTML, see if a height value is set. If it isn't then it's in the CSS (or nothing is set).

s = $(elem)[0].outerHTML;
if (s.indexOf("height:") > 0) {
    // inline style
} else {
    // somewhere else
}

Answer 3

    $( "div" ).click(function() {

you can check if height is defined for this div parent element or children using *this* reference. For now i am just fetching the height of the div which has been clicked.
    var height= $( this ).css( "height" );
    //If height is truthy  
    if(height){
    //your code here
    }
    });

Hope this answers your query. For more details..

Answer 4

The problem is what do you mean by 'is set'?

In vanilla javascript you can do:

element.style.height

This will return an empty string if no height has been set INLINE.

However, if a height has been applied via a stylesheet, it will still return an empty string.

The problem is, if you return a computed height by either .height() in jQuery or window.getComputedStyle(element).height in Javascript, then there is no way of telling if it was calculated by applying a style sheet (what you would call 'having a height property set'), or was generated by extending the height of the element to fit its contents (which you'd call 'not having a height property set').

---------------------Update----------------------

To make it clearer, I'm trying to see if the height of a div is a computed height, or if it a height that was defined in css.

A div can contain the height of it's children, or it can have a height set specifically on the div. The heights for either the children or the div in question can be set in a CSS file, style tag on the page, or on the div itself.

I'm trying to see if the div has a css set height property.

• by pedalpete

---------------------Update----------------------

I understood your question, but perhaps my answer was a bit opaque.

There is nothing you can call that will tell you if an element has a style property applied to it by a style sheet. In other words, you can't do what you want to do.

The only thing you can find out (via element.style) is if there is an inline style declared.

getComputedStyle will tell you how high an element currently is, but it won't tell you how it got that way.

• by Graham Nicol

Answer 5

Looks like there isn't an easy way of doing this, my method to resolve this is to hide the children of the div, and and check if the height of the div has changed. If it has, the height was not set, if it hasn't the height was set.

This fails when the div has nothing but text, but as this is a layout tag, it will likely always have sub tags.

var elHeight = $(elem).height();
$(elem).children().hide();
var checkHeight = elHeight===$(elem).height();
$(elem).children().show();
console.log(checkHeight);
if(checkHeight===false) return setSize($(elem).parent().height()/2);