Question

我正在尝试将所有h1的背景颜色更改为红色。

在我的popup.js链接到popup.html我添加了这段代码：

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

它适用于document.body，但我不知道如何使它适用于getelementbytagname

另外，我想在h1容器中添加一些文字。

Answer 1

getElementsByTagName('h1')会返回多个结果：确切地说是HTMLCollection。

您无法在集合本身设置.style。

在最近的Chrome版本（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 el是否存在所以它不会被标记为多次。

镀铬扩展更改元素颜色

2 个答案: