Question

我想：

查找页面中所有元素的样式属性（例如：所有具有color:#333;的元素）
为所有这些属性更改此属性（例如，从color:#333更改为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;
    }
  });
})();

Live example using red for clarity | source - 请注意，该示例依赖于ES5功能和querySelectorAll，但由于这是Chrome，我知道它们就在那里。

请注意，上面假设为内联样式，因为您谈到了style属性。如果您的意思是计算样式，那么除了在调用getComputedStyle的页面上循环所有元素之外没有任何内容。除此之外，以上适用。

最后注意事项：如果您的确认为样式属性的值为color: #333，而不是值color:#333或color:#333333;或color: #333; font-weight: bold或任何其他字符串，那么您的{ {1}}可以处理：querySelectorAll。但它会非常脆弱。

从下面的评论中，您可能需要浏览每个元素。如果是这样，我根本不会使用querySelectorAll('*[style="color: #333"]')，我会使用递归下降：

querySelectorAll

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

Answer 2

如果使用jquery，这肯定会更简单。在任何情况下，最好的方法是使用类并使用filter jquery method来获取所需的对象。

但如果你真的想要得到它们，你可以做类似的事情：

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

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

Answer 3

如果您没有为要跟踪的所有元素添加至少一个特定的CSS类，则不能这样做。

或者更好的是，你可以通过循环DOM的所有元素来获得非常糟糕的表现，直到找到你想要的东西。 但是，请不要想到这样做

Answer 4

按照颜色查询所有元素已经说得非常困难/低效。

// refrence: http://stackoverflow.com/questions/5999209/jquery-how-to-get-the-background-color-code-of-an-element
var arr = [];

$('*').each(function (i, ele) {
   // is red => save
   if($(ele).css('backgroundColor') == ('rgb(0, 0, 255)')) arr.push(ele);
});

console.log(arr);

这是一个JSFiddle示例：http://jsfiddle.net/ddAg7/

我对此的建议是：不要这样做！

Answer 5

像

这样的东西

$('selector').each(function() {
    if($(this).attr('style').indexOf('font-weight') > -1) {
        alert('got my attribute');
    }
});

if语句中的

你可以用不同的css替换它......不确定..虽然没有在所有浏览器上尝试过：）

Javascript，CSS：按样式属性获取元素

5 个答案: