Javascript: Get Typed CSS Values Not Computed Values

Get CSS not-computed property-value with Javascript only

If you need to access this information programmatically (as opposed to just looking at it in devtools), you're looking for the document.styleSheets collection. Each stylesheet in the collection has the CSS rules and media query rules, etc., for that stylesheet, in a form where you can access the actual style info, not the computed result.

For example:

var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);forEach(document.styleSheets, function(sheet, index) {  forEach(sheet.cssRules || sheet.rules, function(rule) {    if (rule instanceof CSSStyleRule && rule.selectorText == ".foo") {      console.log(".foo's width rule: " + rule.style.width);    }  });});

.foo {  width: calc(100% - 10px);}

How to get the declared CSS value, not the computed CSS value

I think this is what you're after:

$('#widen').on('click', function(e){    $('.example').addClass('wider');        $('#prefetch').text('The div will be: ' + getWidth('wider'));});
function getWidth(className){    for (var s = 0; s < document.styleSheets.length; s++){        var rules = document.styleSheets[s].rules || document.styleSheets[s].cssRules; console.log(rules);        for (var r = 0; r < rules.length; r++){            var rule = rules[r]; console.log(rule);            if (rule.selectorText == '.'+className){                console.log('match!');                return rule.style.width;            }        }    }    return undefined;}

.example {    width: 100px;    background-color: #ccc;    border: 1px solid black;}.wider {    width: 320px;    -webkit-transition: width 5s;    -moz-transition: width 5s;    -o-transition: width 5s;    transition: width 5s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="example">This is a simple container.</div><button id="widen" type="button">Widen</button><span id="prefetch"></span>

My CSS values does not reflect the values in my JavaScript

The elem.style.display property only reports a display property that is set directly on the DOM object. It does not report a style that is inherited from a style sheet.

To get a style value including those from a style sheet, you can use window.getComputedStyle().

function display(elem) {
    return getComputedStyle(elem, null).getPropertyValue("display");
}

Get actual value specified in CSS using jQuery

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.

Is there a way to get the typed CSS and not the computed style?

Resolved it this way: I modified the code from Can jQuery get all CSS styles associated with an element?
to this one:

function css(a){
   var o = {};
   var rules = window.getMatchedCSSRules(a.get(0));
   for(var r in rules) {
         o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
   }
   return o;
}

function css2json(css){
        var s = {};
        if(!css) return s;
        if(css instanceof CSSStyleDeclaration) {
            for(var i in css) {
                if((css[i]).toLowerCase) {
                    s[(css[i]).toLowerCase()] = (css[css[i]]);
                }
            }
        } else if(typeof css == "string") {
            css = css.split("; ");          
            for (var i in css) {
                var l = css[i].split(": ");
                s[l[0].toLowerCase()] = (l[1]);
            };
        }
        return s;
    }

Get computed value of CSS variable that uses an expression like calc

Technically you cannot because the computed value is not static and will depend on other properties. In this case it's trivial since we are dealing with pixel value but imagine the case where you will have percentage value. Percentage is relative to other properties so we cannot compute it until it's used with var(). Same logic if we use unit like em, ch, etc

Here is a simple example to illustrate:

let div = document.getElementById('example');console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))console.log(window.getComputedStyle(div).getPropertyValue('font-size'))console.log(window.getComputedStyle(div).getPropertyValue('width'))console.log(window.getComputedStyle(div).getPropertyValue('background-size'));

:root {  --example-var: calc(100% + 5px - 10px);}#example {  font-size:var(--example-var);  width:var(--example-var);  background-size:var(--example-var);}

<div id='example'>some text</div>

getComputedStyle (or) $.css(map) -- to get every style declaration

is there any way to get a key/value output of all styling of a dom element?

Yes, but don't expect the exact handling of values (units etc.) to be the same cross-browser.

var styles= [];

// The DOM Level 2 CSS way
//
if ('getComputedStyle' in window) {
    var cs= getComputedStyle(element, '');
    if (cs.length!==0)
        for (var i= 0; i<cs.length; i++)
            styles.push([cs.item(i), cs.getPropertyValue(cs.item(i))]);

    // Opera workaround. Opera doesn't support `item`/`length`
    // on CSSStyleDeclaration.
    //
    else
        for (var k in cs)
            if (cs.hasOwnProperty(k))
                styles.push([k, cs[k]]);

// The IE way
//
} else if ('currentStyle' in element) {
    var cs= element.currentStyle;
    for (var k in cs)
        styles.push([k, cs[k]]);
}