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

Question

I need an array of all elements with a fixed position.

This is what I still have (mootools code)

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

Is there a more direct way to do this?

Answer 1

Not really, what you posted is the best way to do this.

but if you do this more often, I would 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"));

ps this will break in mootools 1.3, as slick uses a different selection mechanism.

so that it works in 1.3 do:

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

and finally, to make it more universal so that you can find any CSS property as 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];
};

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");