选择元素按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

在jQuery中你可以使用

$('*').filter( function(){
  return ($(this).css('position') == 'absolute');
} );

[更新]

甚至创建一个新的选择器.
让我感兴趣,所以这里是一个(它的第一个,所以它不是为了提高效率)通过css属性找到元素..

$.expr[':'].css = function(obj, index, meta, stack){
  var params = meta[3].split(',');

  return ($(obj).css(params[0]) == params[1]);
};

usage:$('optionalSelector:css(property,value)')
将返回其property = value的所有(optionalSelector) 元素

示例:var visibleDivs = $('div:css(visibility,visible)');
将返回其可见性设置为可见的所有div(也适用于默认可见性..)

Answer 2

你可以保留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;
}

Answer 3

对于Mootools:

var styleEls = $$('*').filter(function(item) {
    return item.getStyle('position') == 'absolute';
});