CODEWITHSUNDEEP
javascriptcssdom
Adilson de Almeida Jr
Adilson de Almeida Jr

Reputation: 2755

Determine what CSS selectors are been applied to an element

Is there a way do determine if a selector is currently been applied to an given element?

I know it´s possible to iterate over all CSS selectors, and test if each one is applicably or not. But I´m not sure if this is the way that Firebug and other inspector do it.

EDIT: I need a way to do it dynamically, with JS.

Upvotes: 3

Views: 217

Answers (3)

zzzzBov
zzzzBov

Reputation: 179256

You can check if an element instance is matched by a selector by using document.querySelectorAll and Array.prototype.indexOf:

function elementMatchesSelector(element, selector) {
    return Array.prototype.indexOf.call(document.querySelectorAll(selector), element) > -1;
}

Of course this only works for modern browsers that support the aforementioned methods.

Alternatively you can use Element.matches:

function elementMatchesSelector(element, selector) {
    var fn;
    if (!element) {
        return false;
    }
    fn = element.matches || element.mozMatchesSelector || element.msMatchesSelector || element.webkitMatchesSelector;
    if (fn) {
        return fn.call(element, selector);
    }
    return false;
}

Upvotes: 2

hunterc
hunterc

Reputation: 1967

What about using getComputedStyle() MDN Link

Upvotes: 0

zeantsoi
zeantsoi

Reputation: 26203

In Firebug, you can look at the Computed Side Panel. For any given DOM element, it shows the CSS styles applied (even those applied via JavaScript). It also depicts the styles that were overridden. From the docs:

The Computed Side Panel shows all CSS style values calculated by the user agent while interpreting the given CSS information for the selected node inside the HTML Panel.

enter image description here

Upvotes: 1

Related Questions