javascript - 按 CSS 样式选择元素(全部具有给定样式)

Question

有没有一种方法可以使用 JavaScript 选择具有给定样式的所有元素？

例如，我想要页面上所有绝对定位的元素。

我假设在明确声明样式的地方按样式查找元素会更容易:

• 样式是非继承的(比如定位)
• 样式不是默认样式(position:static 也是默认样式)。

我是否受限于这些规则？当这些规则适用时，是否有更好的方法？

如果有选择器引擎(最好是 Slick - Mootools 1.3)，我会很乐意使用它

编辑:
我想出了一个只适用于上述规则的解决方案。
它的工作原理是循环遍历每个样式规则，然后选择页面上的选择器。
谁能告诉我循环遍历所有元素是否更好(如所有解决方案中所推荐的那样)。
我知道在 IE 中我必须将样式更改为小写，但我可以使用 cssText 一次解析所有样式。为简单起见，将其省略。
寻找最佳实践。

var classes = '';
Array.each(documents.stylesheets, function(sheet){
   Array.each(sheet.rules || sheet.cssRules, function(rule){
      if (rule.style.position == 'fixed') classes += rule.selectorText + ',';
   });
});
var styleEls = $$(classes).combine($$('[style*=fixed]'));

Answer 1

您可以保留 Mootools，或任何您使用的...:)

function getStyle(el, prop) {
  var view = document.defaultView;
  if (view && view.getComputedStyle) {
    return view.getComputedStyle(el, null)[prop];
  }
  return el.currentStyle[prop];
}

​function getElementByStyle(style, value, tag)​ {
  var all = document.getElementsByTagName(tag || "*");
  var len = all.length;
  var result = [];
  for ( var i = 0; i < len; i++ ) {
    if ( getStyle(all[i], style) === value )
      result.push(all[i]);
  }
  return result;
}