Question

我正在尝试向div添加属性（动态创建）。但它在这里不起作用。

var style3=createElement('style');
style3.type="text/css";
var target3=document.getElementById('target3');
target3.addEventListener('click',function(){

style3.innerHTML='.target4{background-color:#444;}';
document.getElementsByTagName('head')[0].appendChild(style3);
target3.setAttribute('class','target4');

});

此外，是否可以动态地将伪元素设置为该div？

Answer 1

首先没有这样的全局函数createElement，你应该使用文档对象的方法：

var style3 = document.createElement('style');

然后，为了应用新的背景颜色，您需要使规则优先级更高，因为类选择器.target4不会超过ID选择器#target3。您可以增加选择器权重，例如在前面加上相应的元素ID选择器：#target3.target4。

最后清理，您可以删除style3.type="text/css";，因为它是style元素的默认类型。

所有在一起：

var style3 = document.createElement('style');
var target3 = document.getElementById('target3');
target3.addEventListener('click', function () {
    style3.innerHTML = '#target3.target4 {background-color:#444;}';
    document.head.appendChild(style3);
    target3.setAttribute('class', 'target4');
});

#target3 {
    width:100px;
    height:200px;
    background:red;
}

<body>
    <div id="target3"></div>
</body>

动态创建的类的set属性不能在javascript中工作

1 个答案: