9

Explanation

I cannot believe this has not been asked before but anyway... Please do not get confused with this question.

I am trying to store the height of an element using the jQuery data method so that I can retrieve this value and reset the original value on a specific element.

However, when I try to get the height of my element, it returns the computed height and not the actual CSS value. Whilst this is extremely helpful in other cases, I actually need to get the exact value specified in my stylesheet whether it be 100%, auto, 10px etc...

My Question

Is there a way to get the exact CSS (non-computed) value of an element using jQuery?

For example (CSS):

#wrapper {
    height: auto;
}

And JS:

// Returns 'auto' NOT computed value...
var height = $('#wrapper').height();

Further Information

The only alternative I can currently see is just removing the inline style tag on my element which will remove any styles applied by jQuery. The obviously flaw in this method is that it will remove all styles not just one in particular...

Community
  • 1
  • 1
Ben Carey
  • 16,540
  • 19
  • 87
  • 169
  • YOu can't get it. (Only after DOM loaded and computed values) – Praveen Oct 16 '13 at 13:27
  • No, You can not access original style data, only the computed styles – bitkot Oct 16 '13 at 13:28
  • @LimH. Did you read the question? – Ben Carey Oct 16 '13 at 13:30
  • @FlorianMargaine Sorry – bitkot Oct 16 '13 at 13:30
  • 1
    possible duplicate of [How to get a style attribute from a css class by javascript/jquery?](http://stackoverflow.com/questions/16965515/how-to-get-a-style-attribute-from-a-css-class-by-javascript-jquery) - which has a [working answer](http://stackoverflow.com/questions/16965515/how-to-get-a-style-attribute-from-a-css-class-by-javascript-jquery/16966533#16966533) – rlemon Oct 16 '13 at 13:34
  • Completely depending on the page structure [**this demo**](http://jsfiddle.net/zETzr/) uses `console.log(document.styleSheets[1].rules[0].cssText);` to output the whole rule. But you would have to iterate the `document.styleSheets` and `rules` arrays yourself and parse the result. Might work for simple rules. – andyb Oct 16 '13 at 13:38
  • @BenCarey sorry I was being an idiot. I went into jQuery source code and here is the helper function it uses to get style every time: `return elem.ownerDocument.defaultView.getComputedStyle( elem, null );` whether it's `.height()` or `.css()`. So yeah, computed values only. Path to source: `jquery / src / css / var / getStyles.js` – Lim H. Oct 16 '13 at 13:40

2 Answers2

10

Using jQuery you can only get the calculated value.

As an alternative, I have written a script to find the original css value by enumerating the stylesheets applied to the page, matching the selector and weighing it up by precedence and CSS specificity.

This is handy for finding out if something is auto vs. 100% vs. fixed size.

usage : 

resolveAppliedStyle(document.getElementById("wrapper"), "height");

You can get the script for resolveAppliedStyle from :

https://github.com/stephen-james/FixedHeaderTable/blob/master/dependencies/lib/resolveAppliedStyle.js

and the script it uses to calculate specificity from :

https://github.com/keeganstreet/specificity/blob/master/specificity.js

Stephen James
  • 1,277
  • 9
  • 17
4

Is there a way to get the exact CSS (non-computed) value of an element using jQuery?

You can only retrieve the computed value in px via the DOM.

That being said, you can work out the percentage by getting the elements height and comparing it to the parent's height. em, en and other measurements are not possible.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339