如何查询整个DOM的元素匹配一些计算风格？（纯js）

本文介绍了如何查询整个DOM的元素匹配一些计算风格？（纯js）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

例如，我想查找具有计算风格 c>

c>）元素，并使用 getComputedStyle + getPropertyValue ，您可以按照以下步骤操作：

循环浏览所有CSS规则（通过 document.styleSheets ），并选择包含 position：fixed 的选择器。

> style 属性包含 position：fixed`。

使用选择与选择器匹配的所有元素。
- 测试 window.getComputedStyle（elem，null）.getPropertyValue（'position'） equals fixed 过滤不在固定位置的元素（可能通过更具体的选择器或！important 覆盖）。
- 如果匹配，请推入数组中的元素

有一个包含所有 position：fixed 元素的数组。

代码（小演示：）：

  // [style * = ..] =属性选择器
 var possibilities = ['[style * =position：fixed =position：fixed]']，
 searchFor = / \bposition：\s * fixed; /，
 cssProp ='position'，
 cssValue ='fixed' b $ b styles = document.styleSheets，
i，j，l，rules，rule，elem，res = []; 
 
 for（i = 0; i< styles.length; i ++）{
 rules = styles [i] .cssRules; 
 l = rules.length; 
 for（j = 0; j  rule = rules [j]; 
 if（searchFor.test（rule.cssText））{
 possibilities.push（rule.selectorText）; 
} 
} 
} 
 possibilities = possibilities.join（'，'）; 
 possibilities = document.querySelectorAll（possibilities）; 
 l = possibilities.length; 
 for（i = 0; i  elem = possibilities [i]; 
 //测试元素是否真的位置：fixed 
 if（window.getComputedStyle（elem，null）.getPropertyValue（cssProp）=== cssValue）{
 res.push（elem） ; 
} 
} 
 res; //<  -  =包含所有位置的数组：固定元素

For example I want to find all elements that have computed style position: fixed;. How to do it without making much load on the CPU ?

Is iterating every getElementsByTagName('*') and then doing for loop the only way ?

解决方案

Instead of selecting all (*) elements, and use getComputedStyle + getPropertyValue, you can follow the following steps:

Loop through all CSS rules (via document.styleSheets ) and take the selectors which contains position: fixed.
Select all elements whose style attributecontainsposition: fixed`.
Use document.querySelectorAll to select all elements which match the selector.
- Test whether window.getComputedStyle(elem, null).getPropertyValue('position') equals fixed to filter elements which are not at a fixed position (possibly overridden through a more specific selector, or !important).
- If it matches, push the element in an array
At this point, you have an array containing all position: fixed elements.

Code (small demo: http://jsfiddle.net/GtXpw/):

//[style*=..] = attribute selector
var possibilities = ['[style*="position:fixed"],[style*="position: fixed"]'],
    searchFor = /\bposition:\s*fixed;/,
    cssProp = 'position',
    cssValue = 'fixed',
    styles = document.styleSheets,
    i, j, l, rules, rule, elem, res = [];

for (i=0; i<styles.length; i++) {
    rules = styles[i].cssRules;
    l = rules.length;
    for (j=0; j<l; j++) {
        rule = rules[j];
        if (searchFor.test(rule.cssText)) {
            possibilities.push(rule.selectorText);
        }
    }
}
possibilities = possibilities.join(',');
possibilities = document.querySelectorAll(possibilities);
l = possibilities.length;
for (i=0; i<l; i++) {
   elem = possibilities[i];
   // Test whether the element is really position:fixed
   if (window.getComputedStyle(elem, null).getPropertyValue(cssProp) === cssValue) {
       res.push(elem);
   }
}
res; //<-- = Array containing all position:fixed elements

这篇关于如何查询整个DOM的元素匹配一些计算风格？（纯js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

position