7

In jQuery, I can get a CSS property value for a selector using the css method and passing a property name, for example:

$('#myElement').css('backgroundImage');

My question is, how can I get a css property value from a class that is not yet applied to any element? Similar to $('.myClass').css('backgroundImage'); where the selector returns zero elements but there is a CSS declaration for that class.

Manuel Iglesias
  • 396
  • 1
  • 5
  • 14

2 Answers2

7

You can create a temporary element without adding it to the DOM, and inspect the relevant property. CSS will apply, even if the element is not added to the DOM. E.g.

CSS

p { color: red; }

JS

var p = document.createElement('p');
alert(window.getComputedStyle(p, null).getPropertyValue('color'));

will give you the color value, but not add anything to the DOM.

WARNING

After a bit of research, I've determined that this method only works in Gecko-based browsers, so is not suitable for general-purpose use. This situation may change in future, but I wouldn't rely on this if you want a cross-browser solution today.

Given that, I would suggest you just create a temporary element, add the desired class, add it to the document, inspect it to get the style value, then remove it. You can additionally apply styles such as display: none to prevent it from being shown to the user during the incredibly brief time that it's part of the document.

Bobby Jack
  • 15,689
  • 15
  • 65
  • 97
  • Thank you @Bobby, its a nice solution as I don't have to add an element to the DOM – Manuel Iglesias Feb 21 '12 at 20:02
  • Won't that trigger an error on browsers that don't have a console? Like IE7/IE8? – leopic Jun 09 '12 at 06:20
  • I don't think this works. You need to add to the DOM http://jsfiddle.net/ruisoftware/tuVhU/ – Jose Rui Santos Jun 09 '12 at 06:50
  • @JoseRuiSantos: You're quite right in that the jQuery code did NOT work as expected in 'normal' code. I'd tested it in the console, and assumed that was good enough - obviously not! However, the plain javascript equivalent (obviously, not an *exact* equivalent) *does* work, so the element certainly doesn't need to be added to the DOM in order to get style values for it. Quite why the jQuery version doesn't work, I'm unsure - either $('

    ') doesn't actually create an element at all, or .css() works slightly differently.     – Bobby Jack Jun 12 '12 at 12:52
  • @JoseRuiSantos: ... and that's not the end of this story: see my update above. – Bobby Jack Jun 12 '12 at 13:01
  • @BobbyJack +1 for improving your answer. I came across your answer, when I was also answering this other similiar question http://stackoverflow.com/a/10958973/607874 Essentially, we got the same solution. – Jose Rui Santos Jun 12 '12 at 17:40
3

Short answer: You cannot get a css property from a class that is not applied to any element. However, you can directly read it from a CSS stylesheet and you can do this by using DOM CSS

And then maybe have something like: 

var bgimage = myStyleSheet.cssRules[0].style.background-image;
wtrevino
  • 4,831
  • 2
  • 15
  • 9