How to change css style by javascript

Question

I have css style

chosen-container b::after {
font-family: FontAwesome;
content: "\f078";
}

I need to change this attribute by java script to become:

chosen-container b::after {
font-family: FontAwesome;
content: "\f077";

Easiest way is to simply create a second class (for example, .chosen-container-toggled b::after { ... } ) and use javascript to toggle between the two. — Snowmonkey, Jan 23 '17 at 16:59
You can't manipulate CSS styles directly using Javascript. In case you have such case where you want to change attributes of CSS , better to create two different css class and use them conditinally using jsvascript — K D, Jan 23 '17 at 16:59
possible duplicate of http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — acesmndr, Jan 23 '17 at 17:02

score 1 · Answer 1 · answered Jan 23 '17 at 17:02

Using plain vanilla Javascript , you can do this using the following code:

var cont = document.getElementByClassName(".chosen-container");
cont.className += " container-selected";

A better practice is to apply another modifier class to your element.

You are storing the chosen container as a variable and telling javascript to apply an additional class to it (.container-selected) or one of your choice.

Then simply apply the needed changes to that modifier class like so:

.chosen-container.container-selected b::after {
     font-family: 'FontAwesome';
     content: "\f077"; 
}

Therefore, javascript will look for that element, apply the new class with the updated icon to it and voila.

How to change css style by javascript

1 Answers1