获取:root 的值和设置值

想修改:after中的颜色，查了一些方法，做了一下整理

提前设置好一个class为text的div

<div class="text"></div>

:root{
    --bgcolor: ##FF6F00;
}

.text:after{
    content: '';
    background: var(--bgcolor);
}

var dbroot=document.querySelector(":root")
//获取
var bgColor= getComputedStyle(dbroot).getPropertyValue("--bgcolor")
console.log(bgColor)

//设置
dbroot.style.setProperty("--bgcolor","#1EB3635E")

 

通过这种方式也能达到改变:after的效果，不过存在隐患就是如果有其他使用--bgcolor的地方也会一起发生改变。

再补充一个可以拿到伪元素的方法

JS无法直接获取元素的:after伪元素节点，因为它不是DOM节点。但是可以使用getComputedStyle方法获取元素的样式，进而获取:after伪元素的内容。

// 获取元素
const textDiv = document.querySelector('.text');

// 获取元素的样式
const textDivStyles = window.getComputedStyle(textDiv, ':after');

// 获取伪元素的内容
const textDivAfterContent = textDivStyles.content;
console.log(textDivAfterContent);   // 获取伪元素content中的内容

再补一个可以修改伪元素内容的方法

<div class="text2" data-attr="Datattr"></div>

.text:after{
    content: attr(data-attr);  //content属性显示文字，attr指向data-attr所绑定的动态数据
}

$(".text2").attr("data-attr","内容")