How to read CSS property of Psuedo class in javascript

Question

I've searched SO and googled for this and there are many answers on how to read CSS propeties but non that allow the reading of a pseudo class property.

I have used the following to allow me to easily reuse certain pages (firmware/config upload) on a number of products.

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

then

<span class="productname" />

in the html to insert the correct name.

Currently when sending a Firmware update to the Server no check is done on the client browser and the server returns [please reboot to contunue...] or [this is not a [productname] update file]. As you can imagine the firmware updates can be quite large and if transfered over 3G take some time.

I want to get the productname from the CSS :before pseudo class to allow me to check the upload file name before send it. I have implemented this JS Fiddle to illustrate the issue.

I have tried putting the content property on the .productname class directly (as a copy placeholder) and FF, Opera and Safari will read this but you guessed it IE returns undefined.

I know I can use a global var in JS and might have to do that but I'd rather have it defined in one place to avoid potential mistakes.

So does anyone know how to (or workaround ) read properies of the :pseudo CSS classes?

Thanks in advance.

Update

Since i cant get a solution for IE8, I've changed to using the following code instead.

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 reference to this site Dynamic SCRIPT and STYLE elements in IE

possible duplicate http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript — Manishearth, Mar 12 '12 at 11:56
You might want to look at http://stackoverflow.com/questions/1543648/how-to-get-a-text-before-given-element-using-jquery — bPratik, Mar 12 '12 at 11:56
@bPratik - thank for the comment but useing :before the text isn't in the html doc and I dont think it can be accessed that way. From Firebug and my Fiddle the content of the previous sibling (the div) is empty. — Dampsquid, Mar 12 '12 at 12:05
@Manishearth - interesting question (and answers ) but not sure how that relates to my question. I have considered defining the name in JS and creating the CSS class dynamically which may end up the best solution. — Dampsquid, Mar 12 '12 at 12:19

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

you can use window.getComputedStyle. however, an answer notes that some browsers may not support this, so tread lightly. here's 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);
    });
});

edited May 23 '17 at 12:11

Community

1
1

answered Mar 12 '12 at 12:07

Joseph

117,725
30
181
234

Thanks, but testing your demo it only appear to work in Safari. FF and Opera alert: none, and IE fails with object does not support the method. – Dampsquid Mar 12 '12 at 12:13
1

changing your code to use getComputedStyle( this, ":before" ); makes it work in all but IE, sadly 90%+ of the customers will be using IE and most will be unable to swap to another browser. – Dampsquid Mar 12 '12 at 12:29
@Dampsquid i can't test for IE coz i don't have IE :D. you could check the browser of the user and use "before" or ":before". – Joseph Mar 12 '12 at 20:03
:before works for all dont need to check for IE as it doesnt work in IE (8 anyway), I've allready changed my code to use a JS variable and on the domready I create the cssstyle dynamically, atleast that means is only defined in 1 place. I'll accept your answer anyway as its as close as it'll get to cross browser I think, I'll check IE 9 when I get back to work. – Dampsquid Mar 12 '12 at 20:28

How to read CSS property of Psuedo class in javascript

1 Answers1

Linked