How to Set js effects for the before and after pseudo elements _ javascript skills

This article introduces how to set js effects for before and after pseudo elements through examples. If you are interested in js pseudo element knowledge, learn about Cascading Style Sheets (CSS) the main purpose is to add styles to HTML elements. However, it is unnecessary or impossible to add additional elements to documents in some cases. In fact, CSS has a feature that allows us to add additional elements without disturbing the document itself. This is a "pseudo element ".

Previous

Cannot directly set js effects for the before and after pseudo elements

Example

Now you need to add (the id is box, the content is "I am test content" p) (: The before content is a "prefix", and the color is a red pseudo class)

　　
 　　Document　　
I'm testing content
Script var oBox = document. getElementById ('box'); script 

Solution

[Method 1] dynamically embed CSS styles

IE8-the browser changesScript oBox. className = 'change'; script

[Disadvantage] This method cannot control the value of the content attribute in the pseudo element.

Method 3: Use setAttribute to implement custom content

Script oBox. setAttribute ('data-beforedata', 'prefix'); script

[Note] This method can only be implemented using setAttribute. The dataset method is invalid after testing.

Method 4: Add a style sheet

Firefox does not support the addRule () method, and IE8-Explorer does not support the insertRule () method. The Compatibility Statement is as follows:

Script function insertRule (sheet, ruleKey, ruleValue, index) {return sheet. insertRule? Sheet. insertRule (ruleKey + '{' + ruleValue + '}', index): sheet. addRule (ruleKey, ruleValue, index);} insertRule (document. styleSheets [0], '# box: before', 'content: "prefix"; color: red; ', 0) script

[Disadvantage] This method must have an internal