使用JavaScript將規則添加到樣式表 - insertRule不工作

Question

我正在學習如何使用JavaScript來使CSS更加動態，但由於某些原因，此處的代碼無法正常工作。我在Visual Studio中開發，intellisense甚至沒有向我展示insertRule方法。作爲基礎，我使用這個文件進行學習： https://davidwalsh.name/add-rules-stylesheets https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript 我做的和寫在那裏一樣，但不知何故我不能使用該對象的功能。

window.onload = function() { 
var bar = newSheet(); 
bar.insertRule("header { float: left; opacity: 0.8; }", 1); 
}; 

function newSheet() { 
// Create the <style> tag 
var style = document.createElement("style"); 
//WebKit Hack 
style.appendChild(document.createTextNode("")); 
// Add the <style> element to the page 
document.head.appendChild(style); 

return style.sheet; 

};

Answer 1

元素style工作就像任何其他的DOM的標籤，正因爲如此，你可以使用innerHTML追加的風格吧，因爲你已經創建的javascript元素，你只需要修改它的值：

window.onload = function() { 
    var bar = newSheet(); 
    bar.insertRule("header { float: left; opacity: 0.8; }", 1); 
}; 

function newSheet() { 
// Create the <style> tag 
var style = document.createElement("style"); 

style.innerHTML="p{color:red;}"; 
style.innerHTML+="h1{color:green;}"; 

//WebKit Hack 
style.appendChild(document.createTextNode("")); 
// Add the <style> element to the page 
document.head.appendChild(style); 

return style.sheet; 
};