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]);
};

用法：$('optionalSelector:css(property,value)')
将返回其property = value

的所有元素（ of 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';
});

Answer 4

CSS属性没有选择器，所以你几乎坚持循环遍历每个元素并检查它的位置。

$("*").each(function() {
    var pos = $(this).css('position');
    if(pos == "absolute") {
        // do something
    }
    else if (pos == "relative") {
        // do something else
    }
});

您也可以使用Case语句而不是if / else。

除了这个解决方案之外，没有选择器本身可以通过CSS属性进行搜索（除非它们是内联的，可能）。

选择元素按CSS样式（所有具有给定样式）

4 个答案: