JavaScript-获取dom对象的css伪元素的属性

window.getComputedStyle(ele,null)

这个函数可以获取dom对象的css的显示的属性。函数的第二个参数基本上直接填了null，而这个参数实际上就是解决伪元素的。

window.getComputedStyle(ele,'after');

window.getComputedStyle(ele,'before');

看如下代码:

        <div class="demo"> </div>
        <script type="text/javascript">
           var div=document.getElementsByTagName('div')[0];
           
        </script>

.demo{
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block;
}
.demo::after{
    content:"";
    width:10px;
    height:10px;
    display:inline-block;
    background-color:green;
}

我可以通过上面的方法获得div的after伪元素的css属性

比较多吧，基本上所有的css属性都出现了，这个是一个类数组吧，满足数组和对象的特点。

我们看看有没有我们设置的属性。

的确都是存在的。rgb(0,128,0)就是green，有一点值得注意的是，因为‘-’并不是js识别的字符，这个不是下划线，所以对于这样的用小驼峰式就好了。

有一点值得注意，伪元素的属性,通过这样的方法是不可能改的

只可以读，不可以写。

但是我想改一下伪元素的属性怎么办了。

譬如这个我点击这红色的div，然后把div::after就是这个绿色的变成橙色的。

咋搞？

改值不存在的。

看如下代码:

        <div class="demo" > </div>
        <script type="text/javascript">
           var div=document.getElementsByTagName('div')[0];
           div.οnclick=function() {
               div.className='demo1';
           }
        </script>

.demo{
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block;
}
.demo::after{
    content:"";
    width:10px;
    height:10px;
    display:inline-block;
    background-color:green;
}
.demo1{
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block;
}
.demo1::after{
    content:"";
    width:10px;
    height:10px;
    display:inline-block;
    background-color:orange;
}

我们把div的class换了，然后自动就会选择.demo1::after咯，

方法很笨，还有有用的。