Is there a way to find all elements matching a certain style using the DOM?

Question

I want an array of all elements that have fixed position.

This is what I've got so far (mootools code)

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

Is there a more direct way to do this?

Answer 1

I would suggest you to make a css class

.fixed_pos
{
   position: fixed;
}

apply this class to elements that you want and then

$$(".fixed_pos");

That will give you to all the element

Answer 2

not really, what you posted is the best way of doing it.

but if it's something you do more often, I'd consider abstracting it to a pseudo selector:

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. this will break in mootools 1.3 as slick uses a different selectors engine.

to make it work in 1.3 do:

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

and finally, to make it more versatile so you can look up any CSS property as a part of the selector, you can do something like this:

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

and for mootools 1.3:

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

how to use it:

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

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