chrome extension extension elementの色

Question

h1の背景色をすべて赤色に変更しようとしています。私はこのコードを追加しましたpopup.htmlにリンクされている私のpopup.jsで

：

chrome.tabs.executeScript(null, 
     {code:"document.getElementsByTagName('h1').style.backgroundColor='red';"}); 

それはdocument.bodyと正常に動作しますが、私はそれがgetelementbytagname

でどのように機能するかを作るには考えています

また、h1コンテナにテキストを追加したいと思います。

Answer 1

getElementsByTagName('h1')複数の結果が返されます。正確にはHTMLCollectionです。

.styleをコレクション自体に設定することはできません。最近のクロームバージョン（51+）で

、あなたはfor..ofと、それをループすることができます

let headers = document.getElementsByTagName('h1'); 
for (let header of headers) { 
    header.style.backgroundColor = 'red'; 
} 

headerノードにテキストを追加するには、例えば、標準のDOM操作メソッドを使用することができます.appendChild()：

header.appendChild(document.createTextNode("Boo!")); 

それとも、あなたはその.textContentを操作することができます。

あなたのコードが複雑に成長するにつれ、あなたは専用の.jsファイルに入れてfileの代わりcodeでexecuteScriptを呼び出す必要があります。

Answer 2

私はこのような何かを追加しました

：

chrome.tabs.executeScript(null, { 
    code: "for (var z=0; z < 7; z++) { var el = document.getElementsByTagName('h' + z); for (var i=0; i < el.length; i++) { el[i].style.color ='red'; el[i].innerHTML += '[H' + z + ']';} }" 

}); 

と、それはfinnalyの作品は:)今私はVARエルはそれがマークされることはありませんmultipe時間が存在するかどうかを確認する必要があります。