CODEWITHSUNDEEP
javascriptcssbackgroundpseudo-element
frequent
frequent

Reputation: 28533

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

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!

Upvotes: 1

Views: 1425

Answers (1)

Adam
Adam

Reputation: 2097

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

Upvotes: 2

Related Questions