how to change the CSS background-image of a class-pseudoelement by Javascript only?

Question

I'm getting nowhere with this. I have an element, which is using a :before pseudo selector.

CSS is like this:

 .initHandler:before { 
      width: 100%; 
      position: absolute; 
      top: 0; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      display: block; 
      height: 110%; 
      z-index: 999999;  
      background-color: white; /*background:white  url(../images/ajax-loader.gif) no-repeat center center;*/    
      content: "initializing..."; 
      text-align: center; 
      font-color: #ccc; 
      line-height: 150px; 
      vertical-align: bottom; 
      }

This gives me a white background for my app, which is loading "behind the curtain". On iOS I'm using a startup image, which I'm setting in the page head before jquery and jquerymobile are loaded.

I now want to change the background of my initHaendler:before element to the determined iOS splashscreen.

However I need to this in pure javascript and I have no idea how to select a class/pseudoelement to set a css value.

Can someone help out?

Thanks!

You can't. Add a different class name to it and style that differently in your CSS. — James Allardice, Aug 16 '12 at 22:39
Define another set of styles in your CSS (e.g. `.initHandlerNew:before`) and then change the class name of the element in JavaScript. — James Allardice, Aug 16 '12 at 22:41
Do you want to edit the CSS rule or add a rule to a specific element? — Felix Kling, Aug 16 '12 at 22:41

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

Setting CSS pseudo-class rules from JavaScript seems to suggest that you can't and offers a workaround by appending a stylesheet to the document. I'm unsure if it'd work on iOS but it's worth a shot

edited May 23 '17 at 10:34

Community

1
1

answered Aug 16 '12 at 22:39

Adam Baxter

1,677
20
39

how to change the CSS background-image of a class-pseudoelement by Javascript only?

1 Answers1