16

我想：

  1. 查找页面中所有元素的样式属性（例如：所有具有 的元素color:#333;）
  2. 为所有这些更改此属性（例如从color:#333到color:#444）。

您对此有什么建议吗？

4

5 回答 5

19

我的建议是尽可能避免这样做。相反，使用一个类来分配颜色值，然后您可以使用该类而不是颜色值来查找元素。

据我所知，没有可用于查询特定样式值的选择器（甚至在 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 的最有效方式。

于 2012-05-26T15:55:43.353 回答
7

如果您使用jquery，它肯定会更简单。无论如何，最好的办法是使用类并使用过滤器 jquery 方法来获取您想要的对象。

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

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

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

于 2012-05-26T16:00:30.303 回答
0

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

或者更好的是，您可以通过在 DOM 的所有元素上循环直到找到您要查找的内容来获得非常差的性能。但是请不要考虑这样做

于 2012-05-26T15:56:27.577 回答
0

正如已经说过的那样，按颜色查询所有元素真的很难/效率低下。

// 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/

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

于 2012-05-26T16:03:19.150 回答
0

就像是

$('选择器').each(function() {
    if($(this).attr('style').indexOf('font-weight') > -1) {
        alert('得到了我的属性');
    }
});

在 if 语句中，您可以用不同的 css 替换它...不确定.. 尚未在所有浏览器上尝试过:)

于 2012-05-26T16:11:49.227 回答