JavaScriptを使用したスタイルシートへのルールの追加 - insertRuleが機能しない

Question

JavaScriptを使用してCSSをよりダイナミックにすることについて学んでいますが、何らかの理由でこのコードは動作しません。私はVisual Studio内で開発していますが、インテリセンスは私にメソッド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タグのように動作し、あなたはすでにJavaScriptから要素を作成したので、このようなとして、あなたは、それにスタイルを追加するinnerHTMLプロパティを使用することができ、あなただけの、その値を変更する必要があります

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; 
};