Javascript，CSS：按样式属性获取元素 [英] Javascript, CSS: Get element by style attribute

问题描述

我想：

1. 为网页中的所有元素寻找样式属性（例如： code> color：＃333; ）


2. 更改所有属性的属性（例如 color：＃333 到 color：＃444 ）。

你有什么建议吗？

解决方案

我的建议是避免这样做，如果在所有遥远的可能。相反，使用类来分配颜色值，然后可以使用类来查找元素，而不是颜色值。

至于我意识到，没有选择器（即使在CSS3中），您可以用来查询特定的样式值，这意味着循环遍历所有元素（或者看起来像您可以将其限制为所有元素， code> style 属性），并查看 element.style.color 属性。现在，事情是，即使您在 style 属性中写入 color：＃333; ，不同的浏览器将回显它以不同的方式回到你。它可能是＃333 ，它可能是＃333333 ，它可能是 rgb ，51，51），它甚至可能是 rgba（51，51，51，0）。

总的来说，一个非常尴尬的运动。

---

对于Chrome扩展程序，您可能不必担心多种格式，尽管我会抛弃我们在野外看到的，以防Chrome更改格式（可能与其他浏览器一致） ，已知会发生）。

但是例如：

 （function（）{
 
 //获取所有具有样式属性的元素
 var elms = document.querySelectorAll（* [style]）; 
 
 //循环遍历它们
 Array.prototype.forEach.call（elms，function（elm）{
 //获取颜色值
 var clr = elm.style.color || ; 
 
 //删除所有空格，使它全部为小写
 clr = clr.replace（/ \s / g，）.toLowerCase 
 
 //打开我们知道的可能值
 switch（clr）{
 case＃333：
 case＃333333：
 casergb（51,51,51）：//< ===这是Chrome似乎使用
 casergba（51,51,51,0）：
 elm.style.color =＃444; 
 break; 
} 
}）; 
}）（）; 
  

实例使用红色为了清晰度 | 来源 - 请注意，此示例依赖于 ES5 功能和 querySelectorAll ，但是因为这是Chrome，我知道他们在那里。 >

注意，上面假定为内联样式，因为你谈到了 style 属性。如果您指的是计算的样式，则没有任何内容，而是在调用 getComputedStyle 的页面上循环遍历所有元素。

最后一点：如果你的意思是一个样式属性的值 color：＃333 而不是值 color：＃333 或 color：＃333333; 或 color：＃333;你的 querySelectorAll 可以处理： querySelectorAll（'* [style =font-weight：bold color：＃333]'）。但是会很容易。

---

从你下面的评论中，必须经过每个元素。如果是这样，我不会使用 querySelectorAll ，我会使用递归下降：

  function walk（elm）{
 var node; 
 
 // ...处理这个元素的style或getComputedStyle... 
 
 //处理子元素
 for（node = elm.firstChild ; node; node = node.nextSibling）{
 if（node.nodeType === 1）{// 1 == Element 
 walk（node）; 
} 
} 
} 
 
 //从body元素开始启动
 walk（document.body）; 
  

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

I'd like to:

1. Find a style attribute for all elements in the page (for instance: all elements that have color:#333;)
2. Change this attribute for all of them (for instance from color:#333 to color:#444).

Do you have any suggestion on doing so?

解决方案

My suggestion is avoid doing this if at all remotely possible. Instead, use a class to assign the color value, and then you can look up the elements using the class, rather than the color value.

As far as I'm aware, there's no selector (not even in CSS3) that you can use to query a specific style value, which means looping through all elements (or it looks like you can restrict it to all elements with a style attribute) and looking at the element.style.color property. Now, the thing is, even though you write color: #333; in your style attribute, different browsers will echo it back to you in different ways. It might be #333, it might be #333333, it might be rgb(51, 51, 51), it might even be rgba(51, 51, 51, 0).

So on the whole, a very awkward exercise indeed.

---

Since you've said this is for a Chrome extension, you probably don't have to worry as much about multiple formats, although I'd throw in the ones that we've seen in the wild in case Chrome changes the format (perhaps to be consistent with some other browser, which has been known to happen).

But for instance:

(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 - Note that the example relies on ES5 features and querySelectorAll, but as this is Chrome, I know they're there.

Note that the above assumes inline style, because you talked about the style attribute. If you mean computed style, then there's nothing for it but to loop through all elements on the page calling getComputedStyle. Other than that, the above applies.

Final note: If you really meant a style attribute with precisely the value color: #333 and not the value color:#333 or color:#333333; or color: #333; font-weight: bold or any other string, your querySelectorAll could handle that: querySelectorAll('*[style="color: #333"]'). But it would be very fragile.

---

From your comment below, it sounds like you're having to go through every element. If so, I wouldn't use querySelectorAll at all, I'd use recursive descent:

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);

That way you don't build up large, unnecessary temporary structures. This is probably the most efficient way to walk the entire DOM of a document.

这篇关于Javascript，CSS：按样式属性获取元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！