Hexo
0%

js获取伪元素样式

Posted on In
js获取伪元素样式

获取伪元素样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    #a::after {
      content: 'abc';
      color: red;
    }
</style>

<body>
  <div id="a"></div>
  <script>
    var div=document.querySelector('#a');
    var color =window.getComputedStyle(div,'::after').getPropertyValue('color');
    console.log(color);// rgb(255, 0, 0)
  </script>
</body>

data-*与content

1
2
3
4
5
6
7
8
9
10
11
12
<style>
   #a::after {
     content: attr(data-info);
     color: red;
   }
 </style>
 <div id="a" data-info="foo"></div>
 <script>
   var div=document.querySelector('#a');
   var color =window.getComputedStyle(div,'::after').getPropertyValue('color');
   console.log(color);// rgb(255, 0, 0)
 </script>

更改伪元素样式

通过使用不同的class

通过insertRule

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    #a::after {
      content: attr(data-info);
      color: red;
    }
  </style>
  <div id="a" data-info="foo"></div>
  <script>
    var div=document.querySelector('#a');
    var color =window.getComputedStyle(div,'::after').getPropertyValue('color');
    document.styleSheets[0].insertRule("#a::after {color: green; }", 1);// 后面这个数字参数相当于权重，如果这里传0就不会生效，但是如果之前没有这个属性，传0就会生效
  </script>