css - Javascript がスタイルタグを head に追加

Question

javascript を使用して内部スタイルシートに css を追加しようとしています。これは私が使用したコードです：

function googleJS(){
    var iframe = document.getElementsByTagName('iframe')[0];
    var doc = iframe.contentWindow.document;
    var newScript = doc.createElement('style');
    newScript.setAttribute('.skiptranslate { display: none; }');
    var bodyClass = doc.getElementsByTagName('head')[0];         
    bodyClass.insertBefore(newScript, bodyClass.childNodes[2]);
}

ただし、これにより次の結果が得られます。

<style .skiptranslate {display: none};></style> 

DOM内に必要なCSSを含むスタイルタグを挿入するためにjavascriptを使用する適切な方法は何ですか?

ありがとう

Answer 1

名前が示すように (そしてドキュメントは言う) Element.setAttribute:

指定された要素の新しい属性を追加するか、既存の属性の値を変更します。

これはまさに<style>要素で起こっていることです。これを修正するには、代わりに.textContent/.innerTextまたはテキスト要素.setAttribute()を使用します。

function googleJS(){
    var iframe = document.getElementsByTagName('iframe')[0];
    var doc = iframe.contentWindow.document;
    var newScript = doc.createElement('style');
    var content = doc.createTextNode('.skiptranslate { display: none; }');
    newScript.appendChild(content);
    var bodyClass = doc.getElementsByTagName('head')[0];         
    bodyClass.insertBefore(newScript, bodyClass.childNodes[2]);
}

Answer 2

JQuery を使用できる場合: $().css('Property-Name', 'Value');