Выбрать элемент по стилю CSS (все с заданным стилем) - PullRequest
Новая
       22

Выбрать элемент по стилю CSS (все с заданным стилем)

3 голосов
/ 16 июля 2010

Есть ли способ выбрать все элементы, которые имеют данный стиль, используя JavaScript?

Например, я хочу, чтобы все абсолютно позиционированные элементы на странице.


Я бы предположил, что этолегче найти элементы по стилю, когда стиль явно объявлен:

  • стиль не наследуется (например, позиционирование)
  • стиль не является значением по умолчанию (как было быпозиция: статическая).

Ограничен ли я этими правилами?Есть ли лучший способ для применения этих правил?

Я бы с радостью использовал механизм выбора, если он предоставляется одним (в идеале Slick - Mootools 1.3)

РЕДАКТИРОВАТЬ:
Iпредложил решение, которое будет работать только с указанными выше правилами.
Оно работает путем циклического перебора всех правил стиля и затем выбора на странице.
Может кто-нибудь сказать мне, будет ли это лучше, чем циклическое прохождение всех элементов (как рекомендованово всех решениях).
Я знаю, что в 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]'));

Ответы [ 4 ]

6 голосов
/ 16 июля 2010

Для Mootools: 

var styleEls = $$('*').filter(function(item) {
    return item.getStyle('position') == 'absolute';
});
6 голосов
/ 16 июля 2010

В jQuery вы можете использовать 

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

[обновление]

Или даже создать новый селектор.
заинтересовал меня, и вот один ( это мой 1-й, поэтому он не построен для эффективности ) для поиска элементов по свойству css .. 

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

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

использование : $('optionalSelector:css(property,value)')
вернет все элементы ( из AdditionalSelector ), чье свойство = значение

пример : var visibleDivs = $('div:css(visibility,visible)');
вернет все div, видимость которых установлена ​​на видимость ( работает и для видимости по умолчанию .. )

6 голосов
/ 16 июля 2010

Вы можете хранить 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;
}
0 голосов
/ 16 июля 2010

Селектор для атрибутов CSS отсутствует, поэтому вы в значительной степени застряли в цикле по каждому элементу и проверке его позиции. 

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

Вы также можете использовать операторы Case вместо if / else.

Кроме этого решения, не существует селектора как такового, который мог бы искать по атрибутам CSS (если они не были встроенными, возможно).

...