JS获取和修改伪元素样式1.获取伪元素样式原生JS中可以使用 window.getComputedStyle() 来获

1.获取伪元素样式

原生JS中可以使用 window.getComputedStyle() 来获取伪元素.然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。

语法：window.getComputedStyle(element, [pseudoElement])

参数如下：
element（Object）：伪元素的所在的DOM元素；
pseudoElement（String）：伪元素类型。可选值有：”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”；

JS语法实例：

var mydiv=document.querySelector('#mydiv'); // 获取伪元素所在的DOM对象

var mydivBefore=window.getComputedStyle(mydiv,'::before'); //获取伪元素

var fontSize=window.getComputedStyle(mydiv,'::before').getPropertyValue('font-size');//获取before伪元素的字号大小

但是这种方式获取的样式是只读属性,所以无法修改

2.修改伪元素样式

1.通过切换类名

// CSS代码 
.red::before { content: "red"; color: red; } 

.green::before { content: "green"; color: green; } 

// HTML代码 
<div class="red">内容内容内容内容</div> 
// jQuery代码 
$(".red").removeClass('red').addClass('green');

2.在标签中插入的内部样式：

 <!DOCTYPE html> <html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Document</title> 
        <style></style> 
    </head> 
    <body> 
        <div class="red"></div> 
        <div id="blanc">id</div> 
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
        <script> 
            $(function(){ 
            document.styleSheets[0].insertRule('.red::before { 
            color: green ;content:"oooooiii"}', 0); 
            // 支持非IE的现代浏览器 }) 
        </script> 
    </body>
    </html>

3.使用CSSStyleSheet的insertRule来为伪元素修改样式：

    <!DOCTYPE html> 
    <html lang="en"> 
        <head> 
            <meta charset="UTF-8"> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
            <title>Document</title> 
        </head> 
        <body> 
            <div class="red"></div> 
            <div id="blanc">id</div> 
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <script> 
                $(function(){ var style = document.createElement("style"); 
                document.head.appendChild(style); sheet = style.sheet; 
                // sheet.addRule('.red::before', 'color: green'); 
                // 兼容IE浏览器 
                sheet.insertRule('.red::before { color: green;content:"232213323131" }', 0); 
                // 支持非IE的现代浏览器 
                sheet.insertRule("#blanc { color: red }", 1); }) 
            </script> 
        </body> 
    </html>