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"; 

Answer 1

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.