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

Myth丶恋晨 2022-05-25 23:56 256阅读 0赞

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>

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

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

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

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

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

![70 2][]只可以读，不可以写。

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

![70 3][]譬如这个我点击这红色的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咯，

方法很笨，还有有用的。

[70]: /images/20220526/50b8764f45114728b86dc038151753cf.png
[70 1]: /images/20220526/675f9511f35f4f5b8387d68b72c211b4.png
[70 2]: /images/20220526/aab8798de496463096fd530e3aa2e59c.png
[70 3]: /images/20220526/af2e4bcada39447ea60d1f56692a1143.png