CODEWITHSUNDEEP
javascriptcsscolorspseudo-element
Alex
Alex

Reputation: 1060

Changing :before styling with Javascript

I am wanting to change the color of the stars on this page using js edit:link is now dead

It is the :before on the class "star-rating" that is controlling the color but I have not been able to successfully change it, possibly because it has an important on it.

I read this but it didn't help Javascript set CSS :after styles

Thanks

Alex

Upvotes: 1

Views: 132

Answers (2)

towr
towr

Reputation: 4167

Probably not the nicest way to do it, but

s = document.createElement('style') ; 
s.innerHTML = '.star-rating span:before, .star-rating:before, .woocommerce-page .star-rating:before { color:pink !important}' ; 
document.head.appendChild(s);

i.e. add a style tag to the head which overrides the style for those stars.

Upvotes: 1

Nish
Nish

Reputation: 325

The only solution is to remove and add new DOM for that stars or you can remove that !important from css and then change by using JS.

Otherwise use jquery and then :

starDiv = document.getElementsByClassName("star-rating")[0];
$(starDiv).css('color', 'red', 'important');

Upvotes: 0

Related Questions