How to read Psuedo class CSS property in javascript

Question

I was looking for SO and googled for this, and there are many answers on how to read CSS propositions, but not allow reading properties of the pseudo-class.

I used the following to allow me to easily reuse some pages (firmware / configuration downloads) for a number of products.

.productname:before { content: "My Shiny New Product"; } 

then

 <span class="productname" /> 

in html to insert the correct name.

Currently, when sending the Firmware update to the server, the check is not performed in the client’s browser and the server returns [please reboot into contunue ...] or [this is not an update file [productname]]. As you can imagine, firmware updates can be quite large, and if transferring over 3G takes some time.

I want to get the product name from CSS: to the pseudo class, to allow me to check the name of the downloaded file before sending it. I have illustrated this JS Fiddle issue.

I tried to put the content property in the .productname class directly (as a placeholder for the copy), and FF, Opera and Safari would read this, but you guessed IE to return undefined.

I know that I can use the global var in JS and may have to do it, but I would prefer it to be defined in one place to avoid possible errors.

So does anyone know how (or a workaround) to read pseudo CSS class properties?

Thanks in advance.

Update

Since I cannot find a solution for IE8, instead, I changed it to use the following code.

 window.addEvent( "domready", function() { window.productName = "My Shiny New Product"; var def = '.productname:before { content: "'+window.productName+'"; }'; var style = new Element("style"); style.setAttribute( "type", "text/css" ); if( style.styleSheet ) { style.styleSheet.cssText = def; } else { style.innerHTML = def; } document.getElementsByTagName("head")[0].appendChild(style); document.getElementsByTagName("head")[0].appendChild(style); } ); 

with a link to this site Dynamic elements SCRIPT and STYLE in IE

Answer 1

you can use window.getComputedStyle . however, the answer notes that some browsers may not support this, so go through a little. here is a demo

 <span class="test" /> <span class="test" /> <span class="test" /> .test:before{ content: "My Shiny New Product"; } $(function() { //get all element class test var test = $('.test'); //each of them, alert the content test.each(function() { var style = window.getComputedStyle(this, "before"); alert(style.content); }); });​