我想：
color:#333; 的元素）color:#333 更改为 color:#444）。您对此有什么建议吗？
【问题讨论】：
标签： javascript css
我的建议是尽可能避免这样做。相反，使用一个类来分配颜色值，然后您可以使用该类而不是颜色值来查找元素。
据我所知，没有可用于查询 特定 样式值的选择器（即使在 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 的最有效方式。
【讨论】：
// 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);
querySelectorAll。请参阅更新答案的最后。
如果您不向要跟踪的所有这些元素添加至少一个特定的 CSS 类，则不能。
或者更好的是，您可以通过循环 DOM 的所有元素直到找到您要查找的内容来获得非常差的性能。 但是请不要考虑这样做
【讨论】：
如果你使用 jquery 肯定会更简单。 无论如何，最好的办法是使用类并使用filter jquery method 来获取您想要的对象。
但如果你真的想得到它们，你可以这样做：
$(function () {
$('p').filter(function () {
return $(this).css('color') == '#333';
}).css('color', '#444');
});
上述脚本获取具有所需 css 属性的元素并设置新的 css 属性（颜色 #444）。
【讨论】：
如前所述，按颜色查询所有元素非常困难/效率低下。
// 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/
我的建议是：不要这样做！
【讨论】：
类似
$('selector').each(function() {
if($(this).attr('style').indexOf('font-weight') > -1) {
alert('得到了我的属性');
}
});
在 if 语句中，您可以用不同的 css 替换它...不确定.. 尚未在所有浏览器上尝试过 :)
【讨论】：