search

Home >Web Front-end >JS Tutorial >How to set js effects for before and after pseudo elements_javascript skills

How to set js effects for before and after pseudo elements_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:27:471634browse

The main purpose of Cascading Style Sheets (CSS) is to add styles to HTML elements. However, in some cases adding additional elements to the document is redundant or impossible. In fact, there is a feature in CSS that allows us to add additional elements without disturbing the document itself, which are "pseudo-elements".

Previous words

It is not possible to directly set js effects for before and after pseudo-elements

Example

Now you need to add (:before content is "prefix", color is red pseudo-class) for (div with id as box and content as "I am test content") 

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>Document</title>
</head>
<body>
　　<div id="box">我是测试内容</div>　　<script>　　　　var oBox = document.getElementById('box');　　</script>
</body>
</html>

Solution

[Method 1] Dynamically embed CSS styles

IE8-browser treats the c9ccee2e6ea535a969eb3f532ad9fe89 tag as a special node and does not allow access to its child nodes. IE10 - The browser supports using the styleSheet.cssText property to set styles. Compatible writing methods are as follows: 

<script>
function loadStyleString(css){
  var style = document.createElement("style");
  style.type = "text/css";
  try{
    style.appendChild(document.createTextNode(css));
  }catch(ex){
    style.styleSheet.cssText = css;
  }
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(style);
}
loadStyleString("#box:before{content:'前缀';color: red;}");
<script>

[Method 2] Add a class name with its own pseudo-class 

<style>
  .change:before{content: "前缀";color: red;}
</style> 
<script>
  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 customized content

<style>
　　.change:before{content: attr(data-beforeData);color: red;}
</style> 
<script>
  oBox.setAttribute('data-beforeData','前缀');
</script>

　[Note] This method can only be implemented with setAttribute. After testing, the dataset method is invalid

【Method 4】Add style sheet

Firefox browser does not support the addRule() method, and IE8-browser does not support the insertRule() method. Compatible writing methods are as follows: 

<script>
  function insertRule(sheet,ruleKey,ruleValue,index){
  　　return sheet.insertRule &#63; sheet.insertRule(ruleKey+ '{' + ruleValue + '}',index) : sheet.addRule(ruleKey,ruleValue,index);
　　} 
  insertRule(document.styleSheets[0],'#box:before','content:"前缀";color: red;',0)  
</script>

[Disadvantages] This method must have an internal c9ccee2e6ea535a969eb3f532ad9fe89 or use 2cdf5bf648cf2f33323966d7f58a7f3f to link an external style. Otherwise, if there is no style sheet, document.styleSheets will be an empty list and an error will be reported

[Method 5] Modify the style sheet

First use method 4 to add an empty style sheet, then get the newly generated c9ccee2e6ea535a969eb3f532ad9fe89 and use its innerHTML attribute to modify the style sheet 

<script>
function loadStyleString(css){
  var style = document.createElement("style");
  style.type = "text/css";
  try{
    style.appendChild(document.createTextNode(css));
  }catch(ex){
    style.styleSheet.cssText = css;
  }
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(style);
}
loadStyleString('');
document.head.getElementsByTagName('style')[1].innerHTML = "#oBox:before{color: " + colorValue + ";}";
</script>

　[Note] Only the getElementsByTagName('style')[1] method can be used. After testing, the stylesheets[1] method is invalid

DEMO

　a5cd04300b5fde8791f755807f945aa9 Click the corresponding attribute value below to perform a demonstration

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Implementation of screen orientation change and scrolling in JQuery mobile page development_jqueryNext article：Implementation of screen orientation change and scrolling in JQuery mobile page development_jquery

Related articles

See more