为不在javascript中工作的动态创建类设置属性

set attribute for dynamically created class not working in javascript

本文关键字：创建 动态 设置 属性 工作 javascript      更新时间：2023-09-26

http://jsfiddle.net/55Lht7hu/

我正在尝试向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？。

首先并没有这样的全局函数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>

相关文章：