如何获取具有特定样式的元素答案

【问题标题】：How to get elements with certain style如何获取具有特定样式的元素
【发布时间】：2014-05-16 13:16:40
【问题描述】：

所以说我体内有这个：

<body>
<h1>Hello world!</h1>
<h2 style="color: Blue;">This is my webpage</h2>
<a style="color: Blue;" onClick="changeElem();">Welcome!</a><br>
<h3>Goodbye</h3>
</body>

我想创建函数changeElem()，以便它将蓝色的内容更改为黑色。所以这是我使用这个函数后想要得到的结果：

<h1>Hello world!</h1>
<h2 style="color: Black;">This is my webpage</h2>
<a style="color: Black;" onClick="changeElem();">Welcome!</a><br>
<h3>Goodbye</h3>

如何做到这一点？

【问题讨论】：

http://stackoverflow.com/questions/10767701/javascript-css-get-element-by-style-attribute
如果你在onLoad中使用它，那为什么要放在第一位呢？
@xdazz 编辑了我的帖子
你应该首先避免内联样式。使用 CSS，然后按类遍历和操作它们很简单。

标签： javascript jquery

【解决方案1】：

你最好用 CSS 来做这件事，而不是内联样式。

<head>
<style>
/* By default, elements with class="some-class" are blue */
.some-class {
    color: blue;
}

/* But if body has the class "updated", they turn black */
body.updated .some-class {
    color: black;
}
</style>
<h1>Hello world!</h1>
<h2 class="some-class">This is my webpage</h2>
<a class="some-class" onClick="changeElem();">Welcome!</a><br>
<h3>Goodbye</h3>
</body>

...changeElem 是：

function changeElem() {
    document.body.className += " updated";
}

Live Example | Live Source

如果您对使用内联样式死定，这不是一个好主意，您仍然可以轻松做到：

function changeElem() {
    var div, colorValue, list, index, element;

    // Figure out what this browser returns for `color: Blue`
    // (it might be "Blue", "blue", "rgb(0, 0, 255)",
    // "rgba(0, 0, 255, 0)", "#0000FF", "#0000ff",
    // or possibly others)
    div = document.createElement('div');
    document.body.appendChild(div);
    div.innerHTML = '<span style="color: Blue;"></span>';
    colorValue = div.firstChild.style.color;
    document.body.removeChild(div);

    // Get list of all elements that have any `style` attribute at all
    list = document.querySelectorAll('[style]');

    // Loop through looking for our target color
    for (index = 0; index < list.length; ++index) {
        element = list[index];
        if (element.style.color === colorValue) {
            element.style.color = "black";
        }
    }
}

Live Example | Live Source

【讨论】：

@chris97ong 这是你最大的错误
@chris97ong：CSS（在这种情况下，特别是类）是这种事情的完成方式。我为您添加了一个使用样式的选项。注意它有多尴尬。 为什么这是用 CSS 正确完成的。
@T.J.Crowder 感谢您的帮助。抱歉，如果我只希望标签名称为 h2 的元素为黑色，我该如何修改您的代码？
@chris97ong：乐于助人。我们传递给querySelectorAll 的字符串是CSS selector，所以我们可以用样式表规则识别任何东西，我们可以用那个函数来选择。选择器[style] 选择具有style 属性的any 元素；要将其限制为 h2 元素，我们使用 h2[style]。

【解决方案2】：

我建议使用Class Selectors。

<body onLoad="getElem();">
<h1>Hello world!</h1>
<h2 class="blue">This is my webpage</h2>
<a class="blue">Welcome!</a><br>
<h3>Goodbye</h3>
</body>

然后您可以通过document.querySelectorAll() 轻松选择具有公共类的所有元素：

document.querySelectorAll(".blue")

对于所有具有蓝色类的元素（例如）

然后您可以将每个元素的类简单地设置为黑色。

【讨论】：

【解决方案3】：

 function getElem(){
   var items = document.body.getElementsByTagName("*");
   for (var i = items.length; i--;) {
     style = window.getComputedStyle(items[i].innerHTML);
     color = style.getPropertyValue('color');
     if(color =="rgb(0,0,255)"){ 
        items[i].style.color="black";
       }
   }   
  }

【讨论】：