Question

如果我在页面上有一堆带有 background-color: #000685; 的元素，它们没有任何共同点（没有共同的 id、类、标签名称等）。

有没有办法用 JavaScript 遍历它们并更改背景颜色值？

Answer 1

由于这些元素没有共同点，所以你能做的最好的事情就是遍历页面上的每个元素，获取每个元素的背景颜色，然后进行检查。像这样：

var elements = document.getElementsByTagName("*");
for(let i = 0; i < elements.length; i++){
  var cur = elements[i];
  if(cur.style.backgroundColor=="rgb(0, 6, 133)"){
    cur.style.backgroundColor="red";
  }
}

<div style="background-color: #000685;">I should be red</div>
<div>I should not be red.</div>
<div style="background-color: #000685;">I should be red</div>
<div style="background-color: #000685;">I should be red</div>
<div>I should not be red.</div>
<div>I should not be red.</div>
<p style="background-color: #000685;">I should be red</p>
<p>I should not be red.</p>

如果样式不是内联的，请使用 getComputedStyle().getPropertyValue("background-color")：

var elements = document.getElementsByTagName("*");
for(let i = 0; i < elements.length; i++){
  var cur = elements[i];
  if(window.getComputedStyle(cur).getPropertyValue("background-color")=="rgb(0, 6, 133)"){
    cur.style.backgroundColor="red";
  }
}

.one{
  background-color: #000685;
}
.two{
  background-color: #000685;
}
.three{
  background-color:black;
  color:white;
}

<div class="one">I should be red</div>
<div>I should not be red.</div>
<div class="two">I should be red</div>
<div class="one">I should be red</div>
<div class="three">I should not be red.</div>
<div>I should not be red.</div>
<p class="two">I should be red</p>
<p class="three">I should not be red.</p>

Answer 2

您可以添加一些属性以简化定位过程：

<span 
    style="background-color: #FFFFFF;" 
    background-color
>
    Lorem ipsum dolor sit amet
</span>
<span>Lorem ipsum dolor sit amet</span>
<span 
    style="background-color: #FFFFFF;" 
    background-color
>
    Lorem ipsum dolor sit amet
</span>
<div>Lorem ipsum dolor sit amet</div>
<span 
    style="background-color: #FFFFFF;" 
    background-color
>
    Lorem ipsum dolor sit amet
</span>
<div>Lorem ipsum dolor sit amet</div>
<p 
    style="background-color: #FFFFFF;" 
    background-color
>
    Lorem ipsum dolor sit amet
</p>
<span 
    style="background-color: #FFFFFF;" 
    background-color
>
    Lorem ipsum dolor sit amet
</span>

js：

console.log(document.querySelectorAll('[background-color]'));

输出：

// [object NodeList] (5)
["<span/>","<span/>","<span/>","<p/>","<span/>"]

循环遍历具有特定样式的所有元素

2 个答案: