Changing :before styling with Javascript

Question

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

I only want it to happen on certain pages, and I didn't make the theme so would rather stay out of the css files — Alex
– Alex, Commented Dec 5, 2013 at 14:04
so you can create your own stylesheet or put it on the head of the pages you want are you searching a solution for pure js or jquery too? — DaniP
– DaniP, Commented Dec 5, 2013 at 14:05
the pages are dynamically created by a plugin in Wordpress, js is the only way I can achieve what I want to do — Alex
– Alex, Commented Dec 5, 2013 at 14:07

towr · Accepted Answer · 2013-12-05 14:29:51Z

1

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.

answered Dec 5, 2013 at 14:29

towr

4,1673 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nish · Accepted Answer · 2013-12-05 14:26:23Z

0

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');

edited Dec 5, 2013 at 14:26

answered Dec 5, 2013 at 14:14

Nish

3252 gold badges3 silver badges11 bronze badges

1 Comment

Nish Over a year ago

You can do that by using jquery but you are not using jquery

Collectives™ on Stack Overflow

Changing :before styling with Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related