js控制伪元素样式 

 1 
//获取伪元素
// CSS代码
 2 #myId:before {
 3 content: "hello world!";
 4 display: block;
 5 width: 100px;
 6 height: 100px;
 7 background: red;
 8 }
 9 // HTML代码
10 <div id="myId"></div>
11 // JS代码
12 var myIdElement = document.getElementById("myId");
13 var beforeStyle = window.getComputedStyle(myIdElement, ":before");
14 console.log(beforeStyle); // [CSSStyleDeclaration Object]
15 console.log(beforeStyle.width); // 100px
16 console.log(beforeStyle.getPropertyValue("width")); // 100px
17 console.log(beforeStyle.content); // "hello world!
//更改样式:
 1 // CSS代码
 2 .red::before { 
 3 content: "red"; 
 4 color: red; 
 5 }
 6 .green::before { 
 7 content: "green"; 
 8 color: green;
 9 }
10 // HTML代码
11 <div class="red">内容内容内容内容</div>
12 // jQuery代码
13 $(".red").removeClass('red').addClass('green');

 

posted @ 2018-06-14 22:12  前端极客  阅读(6921)  评论(0)  编辑  收藏  举报