javascript - 如何用 JavaScript 改变虚拟元素？

Question

如何使用 JavaScript 更改虚拟元素的属性？

div#div1::before {
    filter: blur(4px);
}

我想用 JavaScript 改变上面代码中的模糊效果。

Answer 1

如果您希望更改标准 css 类属性，只需使用 document.getElementById(id).style.property = new style，它可以在多个文档中找到，例如 here .

document.getElementById(yourId).style.filter = blur(20px);

按类别选择时功能类似。

如果您之前希望直接访问 css 伪类，可以通过将 style 元素添加到 DOM 元素然后操纵它的值来解决。感谢@RickHitchcock 修复语法

var cssChange = document.createElement('style');
cssChange.innerHTML= '#div::before {filter: 20px;}';
document.selector.appendChild(cssChange );

另一个通常更简洁的选项是在您的 CSS 表中添加一个类:

.some-class:before {
    filter: blur(20px) !important;
}

然后通过JS添加你的类

document.selector.addClass('some-class');

请记住，使用 !important 标签添加多个这样的类来覆盖 CSS 也会变得困惑。