Can you detect when a dom node's style is set to 'auto'?

Question

With the example CSS:

.thing { height: auto }

and HTML:

<div class="thing">The quick brown fox jumps over a lazy dog.</div>

is it possible to detect that the height of .thing is set to 'auto'?

The following methods return values:

jQuery('.thing').height()        // n
jQuery('.thing').css('height')   // 'npx'
getComputedStyle(node).height    // 'npx'

Is there any method that will tell me that the browser is calculating these values from 'auto'?

Answer 1

Yes there is a way, but it's not a funny one. What you have to do is:

1. Loop through all styletags and linked stylesheets.

2. Then get the selectorText for all cssRules in all style tags

   styletag.sheet.cssRules.selectorText
   

   or for IE < 9

   styletag.styleSheet.cssRules.selectorText
   

3. Get all of your elements parents id, class and tagName to find out what possible ways for the tag to get the attribute.

4. Find all possible combinations that point towards your element in your list of cssRules
5. check those cssRules at cssRules.style.width if it is auto.

or do it some reverse way and find all cssRules with style.width == 'auto'; either way its not something easy to get without a lot of code