Get a CSS value from external style sheet with Javascript/jQuery

Question

Is it possible to get a value from the external CSS of a page if the element that the style refers to has not been generated yet? (the element is to be generated dynamically).

The jQuery method I've seen is $('element').css('property');, but this relies on element being on the page. Is there a way of finding out what the property is set to within the CSS rather than the computed style of an element?

Will I have to do something ugly like add a hidden copy of the element to my page so that I can access its style attributes?

Answer 1

With jQuery:

// Scoping function just to avoid creating a global  (function() {      var $p = $("<p></p>").hide().appendTo("body");      console.log($p.css("color"));      $p.remove();  })();

p {color: blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Using the DOM directly:

// Scoping function just to avoid creating a global  (function() {      var p = document.createElement('p');      document.body.appendChild(p);      console.log(getComputedStyle(p).color);      document.body.removeChild(p);  })();

p {color: blue}

Note: In both cases, if you're loading external style sheets, you'll want to wait for them to load in order to see their effect on the element. Neither jQuery's ready nor the DOM's DOMContentLoaded event does that, you'd have to ensure it by watching for them to load.

Answer 2

Normally you should be let the browser apply all the rules and then ask the browser for the results, but for the rare case where you really need to get the value out of the style sheet you can use this: (JSFiddle)

function getStyleSheetPropertyValue(selectorText, propertyName) {     // search backwards because the last match is more likely the right one     for (var s= document.styleSheets.length - 1; s >= 0; s--) {         var cssRules = document.styleSheets[s].cssRules ||                 document.styleSheets[s].rules || []; // IE support         for (var c=0; c < cssRules.length; c++) {             if (cssRules[c].selectorText === selectorText)                  return cssRules[c].style[propertyName];         }     }     return null; }  alert(getStyleSheetPropertyValue("p", "color")); 

Note that this is pretty fragile, as you have to supply the full selector text that matches the rule you are looking up (it is not parsed) and it does not handle duplicate entries or any kind of precedence rules. It's hard for me to think of a case when using this would be a good idea, but here it is just as an example.