Javascript,CSS:按样式属性获取元素

Question

我想:

1. 查找页面中所有元素的样式属性(例如:所有元素都有color:#333;)
2. 为所有这些属性更改此属性(例如从color:#333to更改color:#444).

这样做有什么建议吗？

Answer 1

我的建议是尽可能避免这样做.相反,使用类来指定颜色值,然后您可以使用类而不是颜色值查找元素.

据我所知,没有选择器(甚至在CSS3中)你可以用来查询特定的样式值,这意味着循环遍历所有元素(或者看起来你可以将它限制为具有style属性的所有元素)并看着该element.style.color物业.现在,问题是,即使您color: #333;在style属性中写入,不同的浏览器也会以不同的方式回复给您.它可能是#333,它可能是#333333,rgb(51, 51, 51)甚至可能是rgba(51, 51, 51, 0).

所以总的来说,确实是一个非常尴尬的运动.

既然你已经说过这是针对Chrome扩展程序的,那么你可能不必担心多种格式,尽管如果Chrome更改了格式,我会抛弃我们在野外看到的格式(也许与已知的其他浏览器保持一致.

但例如:

(function() {

  // Get all elements that have a style attribute
  var elms = document.querySelectorAll("*[style]");

  // Loop through them
  Array.prototype.forEach.call(elms, function(elm) {
    // Get the color value
    var clr = elm.style.color || "";

    // Remove all whitespace, make it all lower case
    clr = clr.replace(/\s/g, "").toLowerCase();

    // Switch on the possible values we know of
    switch (clr) {
      case "#333":
      case "#333333":
      case "rgb(51,51,51)": // <=== This is the one Chrome seems to use
      case "rgba(51,51,51,0)":
        elm.style.color = "#444";
        break;
    }
  });
})();

使用红色的实例为清晰度 | 来源 - 请注意,该示例依赖于ES5功能querySelectorAll,但由于这是Chrome,我知道它们就在那里.

请注意,上面假设为内联样式,因为您谈到了该style属性.如果你的意思是计算风格,那么除了循环遍历页面调用的所有元素之外没有什么可以做的getComputedStyle.除此之外,以上适用.

最后要注意的:如果你真的意味着样式属性与精确值color: #333,而不是价值color:#333或color:#333333;或color: #333; font-weight: bold或任何其他字符串,你querySelectorAll可以搞定:querySelectorAll('*[style="color: #333"]').但它会非常脆弱.

从下面的评论中,听起来你必须经历每个元素.如果是这样,我根本不会使用querySelectorAll,我会使用递归下降:

function walk(elm) {
    var node;

    // ...handle this element's `style` or `getComputedStyle`...

    // Handle child elements
    for (node = elm.firstChild; node; node = node.nextSibling) {
        if (node.nodeType === 1) { // 1 == Element
            walk(node);
        }
    }
}

// Kick it off starting with the `body` element
walk(document.body);

这样你就不会建立庞大的,不必要的临时结构.这可能是遍历文档的整个DOM的最有效方式.

Answer 2

内线

[...document.querySelectorAll("[style*='color:#333']")].forEach(e=>e.style.color='#444')

function switchColors() {
  [...document.querySelectorAll("div[style*='color:#333']")]
    .forEach(el => el.style.color = '#f00')
}

<div>EXAMPLE:
  <div>
    <div style="background: #eee; color:#333;">aaa</div>
    <div style="background: gray; color:#00f;">
      bbb
      <div style="color:#333;">ccc</div>
    </div>

  </div>

  <div style="color:#040;">ddd</div>
  <div style="color:#333; font-size: 20px">eee</div>
</div>

<button onclick="switchColors()">Switch Colors</button>

Answer 3

如果您使用jquery，则绝对更简单。无论如何，最好的方法是使用类并使用filter jquery方法获取所需的对象。

但是，如果您真的想得到他们，可以执行以下操作：

$(function () {
    $('p').filter(function () {
        return $(this).css('color') == '#333';
    }).css('color', '#444');
});

上面的脚本获取具有所需css属性的元素，并设置一个新的css属性（颜色＃444）。