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

Posted 2023-02-21

【中文标题】Javascript，CSS：通过样式属性获取元素

【英文标题】：Javascript, CSS: Get element by style attribute

【发布时间】：2012-06-01 19:41:23

【问题描述】：

我想：

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

您对此有什么建议吗？

【问题讨论】：

为什么不为所有这些元素添加一个（另一个）类？ :)

我不能，因为脚本是 Chrome 扩展的一部分

依靠一个css属性来查找元素确实不是个好主意。即使使用像 jQuery 这样的框架，您也需要解析大量代码。

是的，但是某些扩展不会费心将所有废话添加到输入中，有时会破坏设计，除了查找某些扩展添加的内容并修复它之外别无选择

【参考方案1】：

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

据我所知，没有可用于查询 特定 样式值的选择器（即使在 CSS3 中也没有），这意味着循环遍历所有元素（或者看起来像可以将其限制为具有style 属性的所有元素）并查看element.style.color 属性。现在，问题是，即使你在style 属性中写了color: #333;，不同的浏览器也会以不同的方式回显给你。可能是#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 属性。如果您的意思是 computed 样式，那么除了在调用 getComputedStyle 的页面上循环遍历 all 元素之外别无他法。除此之外，以上适用。

最后说明：如果您的真正意思是样式属性的值恰好是 color: #333 而不是值 color:#333 或 color:#333333; 或 color: #333; font-weight: bold 或任何其他字符串，您的 querySelectorAll 可以处理：@987654341 @。但它会非常脆弱。

---

从您下面的评论中，听起来您必须遍历 每个 元素。如果是这样，我根本不会使用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 的最有效方式。

【讨论】：

好吧，浏览器应该在内部将所有这些颜色转换为一致的格式，因此如果您正在扫描 DOM，则不需要寻找多个颜色。

@Spudley：如果您针对多个浏览器，您会这样做，这就是我提出它的原因。但是现在 OP 说这是一个 Chrome 扩展，它简化了事情。当然，如果 Chrome 不会将其从 dot 版本更改为 dot 版本，他们可以很好地与其他浏览器保持一致...

非常感谢@T.J.Crowder，我实际上需要遍历所有元素。我正在尝试但没有成功：// Get all elements that have a style attribute var elms = document.querySelectorAll(""); // Loop through them Array.prototype.forEach.call(elms, function(elm) // Get the color value var crs = getComputedStyle(elm, ':after').getPropertyCSSValue('color'); alert(crs);

@silviolor：听起来你已经解决了（我假设，因为你接受了答案），但是如果你必须走 all 元素，我不会使用querySelectorAll。请参阅更新答案的最后。

【参考方案2】：

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

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

【参考方案3】：

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

但如果你真的想得到它们，你可以这样做：

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

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

【讨论】：

我同意你的观点，使用 jquery 只是一个建议。 B 也是一个合理的评论，即使扭转这种变化非常简单。关于C，我不同意。对我来说，一个庞大的数组就像一个 10000 个元素的数组，而包含 10000 个元素的页面是非常不寻常的......

【参考方案4】：

如前所述，按颜色查询所有元素非常困难/效率低下。

// refrence: http://***.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/

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

【参考方案5】：

类似

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

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