(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页面上的所有元素之外,没有什么可做的。 最后一点:如果你真的想要一个值为color: #333的样式属性,而不是值color:#333、color:#333333;、color: #333; font-weight: bold或任何其他字符串,那么querySelectorAll可以处理这个问题:querySelectorAll('*[style="color: #333"]').但是它会 * 非常 * 脆弱。 从你下面的评论来看,你似乎需要遍历 every 元素,如果是这样的话,我根本不会使用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);
6条答案
按热度按时间ycl3bljg1#
我的建议是尽量避免这样做,而是使用一个类来分配颜色值,然后可以使用该类而不是颜色值来查找元素。
据我所知,没有选择器(甚至在CSS3中也没有),您可以使用它来查询一个 specific 样式值,这意味着遍历所有元素(或者看起来你可以把它限制在所有带有
style
属性的元素上),然后查看element.style.color
属性。现在,事情是,即使你在style
属性中写color: #333;
,不同的浏览器会以不同的方式回应你,可能是#333
,可能是#333333
,可能是rgb(51, 51, 51)
,甚至可能是rgba(51, 51, 51, 0)
。所以总的来说,这确实是一个非常尴尬的练习。
既然你说这是针对Chrome扩展的,你可能不必担心多种格式,尽管我会把我们在野外看到的那些格式扔进去,以防Chrome改变格式(也许是为了与其他浏览器保持一致,这是众所周知的)。
但举个例子:
Live example using red for clarity|source-注意,这个例子依赖于ES5特性和
querySelectorAll
,但是因为这是Chrome,我知道它们在那里。注意,上面假设了内联样式,因为你讨论的是
style
属性。如果你指的是 computed 样式,那么除了循环调用getComputedStyle
页面上的所有元素之外,没有什么可做的。最后一点:如果你真的想要一个值为
color: #333
的样式属性,而不是值color:#333
、color:#333333;
、color: #333; font-weight: bold
或任何其他字符串,那么querySelectorAll
可以处理这个问题:querySelectorAll('*[style="color: #333"]')
.但是它会 * 非常 * 脆弱。从你下面的评论来看,你似乎需要遍历 every 元素,如果是这样的话,我根本不会使用
querySelectorAll
,我会使用递归下降:这样你就不会建立大的、不必要的临时结构,这可能是遍历文档的整个DOM的最有效的方法。
vs3odd8k2#
如果你使用jquery的话肯定会更简单,在任何情况下,最好是使用类和filter jquery method来获取你想要的对象。
但如果你真的想得到它们,你可以这样做:
上面的脚本获得了具有所需css属性的元素,并设置了一个新的css属性(颜色#444)。
woobm2wo3#
如果您不向所有要跟踪的元素添加至少一个特定的CSS类,则无法实现。
或者更好的方法是,在DOM的所有元素上循环,直到找到要找的东西,这样做的性能非常差。但是,请不要这样做
brgchamk4#
正如已经说过的,按颜色查询所有元素非常困难/低效。
下面是它的一个JSFiddle示例:http://jsfiddle.net/ddAg7/
我对此的建议是:"别这样"
eqoofvh95#
就像
在if语句中,你可以用不同的css替换它......不确定......虽然没有在所有浏览器上尝试过:)
4smxwvx56#
一行
x一个一个一个一个x一个一个二个x