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

Question

Мне нужен массив всех элементов с фиксированной позицией.

Это то, что я получил до сих пор (код mootools)

$$('*').filter(function(aEl){ return aEl.getStyle('position')=='fixed' });

Есть ли более прямой способ сделать это?

Answer 1

не совсем, то, что вы разместили - лучший способ сделать это.

но если это то, что вы делаете чаще, я бы подумал об абстрагировании от псевдоселектора:

Selectors.Pseudo.fixed = function(){
    return this.getStyle("position") == "fixed";
};

// can now use it as a part of a normal selector:
console.log(document.getElements("div:fixed"));

p.s. это сломается в mootools 1.3, так как Slick использует другой движок селекторов.

чтобы заставить его работать в 1.3 сделать:

Slick.definePseudo('fixed',function() {
    return this.getStyle("position") == "fixed";
});

и, наконец, чтобы сделать его более универсальным, чтобы вы могли искать любое свойство CSS как часть селектора, вы можете сделать что-то вроде этого:

Selectors.Pseudo.style = function(key) {
    var styles = key.split("=");
    return styles.length == 2 && this.getStyle(styles[0]) == styles[1];
};

и для mootools 1.3:

Slick.definePseudo('style', function(key) {
    var styles = key.split("=");
    return styles.length == 2 && this.getStyle(styles[0]) == styles[1];
});

как его использовать:

console.log(document.getElements("div:style(position=fixed)"));

http://www.jsfiddle.net/h7JPS/3/

Answer 2

Я бы посоветовал вам сделать класс CSS

.fixed_pos
{
   position: fixed;
}

, применить этот класс к элементам, которые вы хотите, а затем

$$(".fixed_pos");

Это даст вам все элементы