設置屬性爲動態創建的類不工作在javascript

http://jsfiddle.net/55Lht7hu/設置屬性爲動態創建的類不工作在javascript

我想添加一個屬性（動態創建）到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？

來源

2015-03-03 arvind

而且，它不應該是'使用document.createElement（ '風格'）;'？ – 2015-03-03 14:11:18

@PeterKA它是如果你只是想添加，作爲文本里面的style3元素 – Pete 2015-03-03 14:11:44

你可能想看到這個：http://stackoverflow.com/questions/524696/how-to-create-a-style-tag- with-javascript – 2015-03-03 14:13:32

，首先不存在這樣的全局函數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>

來源

2015-03-03 14:11:42 dfsq

設置屬性爲動態創建的類不工作在javascript

回答

相關問題