CSS Rules and DOM
in [JavaScript]
|
Prev: Acronym or abbreviation? (was: solution for IE6 .setAttribute bug?)
Next: Dynamicly add dropdown lists to a form populated with php/mysql query
From: Nathan Davis on 23 Dec 2008 11:26 Hi, I'm looking for a way to query the DOM to determine which CSS rules apply to a particular element. Solutions that are cross-browser compatible are preferred, but not absolutely necessary. Does anyone have any suggestions? I've spent several hours on this, but can't seem to find the answer. Thank you, --Nathan Davis
From: Martin Honnen on 23 Dec 2008 11:35 Nathan Davis wrote: > I'm looking for a way to query the DOM to determine which CSS rules > apply to a particular element. Solutions that are cross-browser > compatible are preferred, but not absolutely necessary. Does anyone > have any suggestions? I've spent several hours on this, but can't > seem to find the answer. Well current browsers expose document.styleSheets and then IE/Win exposes document.styleSheets[i].rules and W3C DOM Level 2 compliant browsers expose document.styleSheets[i].cssRules Then you can check the selector of each rule but there is no API as far as I know telling you whether a rule applies to a certain element. -- Martin Honnen http://JavaScript.FAQTs.com/
From: Nathan Davis on 23 Dec 2008 12:57 On Dec 23, 10:35 am, Martin Honnen <mahotr...(a)yahoo.de> wrote: > Nathan Davis wrote: > > I'm looking for a way to query the DOM to determine which CSS rules > > apply to a particular element. Solutions that are cross-browser > > compatible are preferred, but not absolutely necessary. Does anyone > > have any suggestions? I've spent several hours on this, but can't > > seem to find the answer. > > Well current browsers expose > document.styleSheets > and then IE/Win exposes > document.styleSheets[i].rules > and W3C DOM Level 2 compliant browsers expose > document.styleSheets[i].cssRules > Then you can check the selector of each rule but there is no API as far > as I know telling you whether a rule applies to a certain element. > > -- > > Martin Honnen > http://JavaScript.FAQTs.com/ Yeah, I was kind of hoping to avoid reimplementing CSS selectors in javascript, but that was the conclusion I reached too. Does anyone know how they do the CSS introspection Firebug? --Nathan Davis
From: dhtml on 24 Dec 2008 02:56 Nathan Davis wrote: > On Dec 23, 10:35 am, Martin Honnen <mahotr...(a)yahoo.de> wrote: >> Nathan Davis wrote: >>> I'm looking for a way to query the DOM to determine which CSS rules >>> apply to a particular element. Solutions that are cross-browser >>> compatible are preferred, but not absolutely necessary. Does anyone >>> have any suggestions? I've spent several hours on this, but can't >>> seem to find the answer. >> Well current browsers expose >> document.styleSheets >> and then IE/Win exposes >> document.styleSheets[i].rules >> and W3C DOM Level 2 compliant browsers expose >> document.styleSheets[i].cssRules >> Then you can check the selector of each rule but there is no API as far >> as I know telling you whether a rule applies to a certain element. >> >> -- >> >> Martin Honnen >> http://JavaScript.FAQTs.com/ > > Yeah, I was kind of hoping to avoid reimplementing CSS selectors in > javascript, but that was the conclusion I reached too. Does anyone > know how they do the CSS introspection Firebug? > There are mozilla-internal methods for that. It is not exposed to HTML DOM. I cannot remember the name of the method, but there is a method for this. I found it on XUL planet, I think. you might try posting to a Firebug group. Or, if you're interested in pursuing this, follow up on the www-style mailing list for a getAppliedRules() method. What are you trying to do? > --Nathan Davis -- comp.lang.javascript FAQ <URL: http://jibbering.com/faq/ >
From: Nathan Davis on 24 Dec 2008 15:41
> > Yeah, I was kind of hoping to avoid reimplementing CSS selectors in > > javascript, but that was the conclusion I reached too. Does anyone > > know how they do the CSS introspection Firebug? > > There are mozilla-internal methods for that. It is not exposed to HTML > DOM. I cannot remember the name of the method, but there is a method for > this. I found it on XUL planet, I think. > I looked into Firebug some more, and it looks like they use the inIDOMUtilsinIDOMUtils interface implemented by @mozilla.org/inspector/ dom-utils;1(a)mozilla.org/inspector/dom-utils;1. This provides a getCSSStyleRulesgetCSSStyleRules method that takes an element and returns a list of rules. From my limited experimentation so far, it appears the list is ordered such that index n contains rules that override rule n-1. Of course, Firefox doesn't allow access to XPCOM from web/file resources, so it was a bit of a dance to get around that. I ended up re-writing the page in XUL, and using XUL Explorer to run it. Given the dependency on Mozilla, this isn't necessarily a bad thing. Still, it would be better if there was a cross-browser way. > you might try posting to a Firebug group. Or, if you're interested in > pursuing this, follow up on the www-style mailing list for a > getAppliedRules() method. > I may do that. It seems to me that this would be a relatively common stylesheet introspection problem. > What are you trying to do? > Well, that's not entirely decided yet ;-). Basically, though, I'm trying to build an application that would let the user interactively experiment with different styles. Click on an element, change the color/background, and see the changes instantly. By determining which rule an element gets its color from, it is possible to change the appearance of, for example, all the section headings on the page. --Nathan Davis |