js获取并改变伪元素的值

说在前

本文主要说一下::before ::after，因为剩余::first-letter、::first-line、::selection等没有content属性，方法是一样的。

虽然伪元素可以被浏览器渲染引擎识别并正确渲染，然而伪元素本身并不是DOM元素,所以无法被js直接操作——因此任何基于JS直接选取DOM元素的CSS更改方法对伪元素都不起作用。

获取伪元素的属性值

js 里面虽然没有可以直接获取操作为元素的选择符，但是获取css属性是可以的。
方法：使用getComputedStyle获取当前元素所有最终使用的CSS属性值，然后利用getPropertyValue方法获取对应的属性的值。

• getComputedStyle()；
  • 语法： getComputedStyle(‘元素’,‘伪类’)；
  • getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。
  • 举例：

  var div = document.getElementById("test"),
   style = window.getComputedStyle(div , ":after");
  

• getPropertyValue方法
  • getPropertyValue方法可以获取CSS样式声明对象上的属性值
  • 语法：getPropertyValue(‘属性名’)；
  • 举例：

   var div = document.getElementById("test"),
    fontsize = window.getComputedStyle(div , ":after").getPropertyValue('font-size');;
  

  更改伪元素的值

  window.getComputedStyle方法虽然可以获取到伪元素的属性值，然而根据该方法名字也知道其只能获取CSS样式，并无法更改css属性。
  自然想到的办法：创建多个class，通过切换class来达到改变样式的目的。但是这样的方法太过繁琐。实际上我们可以通过 利用DOM的data-*属性来更改content的值。
  HTML:

  <div class="my"></div>
  

CSS:

.my::before {
        content: attr(data-text);
 }
    
.my {
     width: 100px;
     height: 100px;
}

动态添加：

let my = document.getElementsByClassName('my')[0];
setTimeout(() => {
    my.setAttribute('data-text', '333');
}, 2000);

结果如下：