Modifying the style of the Before,after pseudo-class using the Javascript,jquery implementation

Classes such as the following HTML and style

<p class= "Red" >hello,are you kain?</p>

CSS Styles

. red:before {    ' red ',    background-color  : Red}

1. Use JavaScript or jquery to switch, add the class of the element

. green:before {    ' green ';    Background-color:green;} $ (' P '). addclass (' green ');

2. Insert a style dynamically in the existing style document

Document.stylesheet[0].addrule ('. Red:before ', ' Background-color:green ');d ocument.stylesheet[0]. Insertrule ('. Red:before{background-color:green} ', 0);

3. Create a new style sheet and insert it into it using JavaScript or Jquert

var style = document.createlement (' style '= style.sheet;sheet.addrule ('. Red:before ', ' Background-color:green '); Sheet.insertrule ('. Red:before{background-color:green} ', 0); // jQuery$ (' <style>.red:before{background-color:green}</style> '). AppendTo (' head ');

4. Using the HTML5 data-property, use attr () dynamic modification in the attribute.

Add the Data-attr= "red" attribute to the P tag and then $ (' red '). attr (' data-attr ', ' green ');

Modifying the style of the Before,after pseudo-class (go) using the Javascript,jquery implementation