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– Snowmonkey2017-01-23 16:59:07 +00:00Commented Jan 23, 2017 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 jsvascriptK D– K D2017-01-23 16:59:25 +00:00Commented Jan 23, 2017 at 16:59
-
possible duplicate of stackoverflow.com/questions/5041494/…acesmndr– acesmndr2017-01-23 17:02:38 +00:00Commented Jan 23, 2017 at 17:02
Add a comment
|
1 Answer
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.
