Get CSS not-computed property-value with Javascript only [duplicate]

Answer 1

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);
}