栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Javascript,CSS:按样式属性获取元素

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Javascript,CSS:按样式属性获取元素

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

据我所知,没有可用于查询 特定
样式值的选择器(即使在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
而不是value
color:#333
color:#333333;
or
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` elementwalk(document.body);

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/366799.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号