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 24 Dec 2008 15:42
> > 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> > 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
From: JR on 24 Dec 2008 15:44
Hello,
I didn't test the code snippet below thoroughly (successful in FF3 &
IE 7 / win), but here goes my
contribution:

function() {
var ss, ret = '', el = document.getElementsByTagName('p')[0] // first
p tag.
if(window.getComputedStyle) { // FF3.
ss = window.getComputedStyle(el, null);
} else if(el.currentStyle) { //IE7 win
ss = el.currentStyle;
}
for (var s in ss) {
if(typeof ss[s] == 'number' || (typeof ss[s] == 'string' && ss
[s].length > 0)) {
ret += s +': ' +ss[s] +'\n';
}
}
alert(ret); // do whatever you wish with ret.
};

Merry Christmas,
Joao Rodrigues

On Dec 23, 2:26 pm, Nathan Davis <davisn90...(a)gmail.com> wrote:
> 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: David Mark on 24 Dec 2008 15:52
On Dec 24, 3:44 pm, JR <groups_j...(a)yahoo.com.br> wrote:
> Hello,
> I didn't test the code snippet below thoroughly (successful in FF3 &
> IE 7 / win), but here goes my
> contribution:
>
> function() {
>         var ss, ret = '', el = document.getElementsByTagName('p')[0] // first
> p tag.
>     if(window.getComputedStyle) { // FF3.

The getComputedStyle method is not necessarily a method of the window
object. In FF, where window == document.defaultView, this will work.
I know of at least one browser where it will not. Also, do not detect
host methods by boolean type conversion (use typeof.)

>                   ss = window.getComputedStyle(el, null);
>                 } else if(el.currentStyle) { //IE7 win
>                         ss = el.currentStyle;

This is the cascaded style, not to be confused with computed styles.

>                 }
>         for (var s in ss) {
>         if(typeof ss[s] == 'number' || (typeof ss[s] == 'string' && ss
> [s].length > 0)) {
>         ret += s +': ' +ss[s] +'\n';
>         }
>         }

Depending on the styles involved, this may yield a very different
result in IE (as opposed to the quasi-standard browsers.)

[snip]
From: JR on 24 Dec 2008 16:20
Reposting my code, because the ss object has a different structure in
Safari 3.x / win version:

function() {
var ss, ret = '', el = document.getElementsByTagName('p')[0],
safari = /webkit/i.test(navigator.userAgent);
if(window.getComputedStyle) { // FF3 and Safari 3.x
ss = window.getComputedStyle(el, null);
} else if(el.currentStyle) { //IE7 win
ss = el.currentStyle;
}
for (var s in ss) {
if(typeof ss[s] == 'number' || (typeof ss[s] == 'string' && ss
[s].length > 0)) {
ret += (!safari) ? (s +': ' +ss[s] +'\n') : (ss[s] +": " +
ss.getPropertyValue(ss[s]) +"\n");
}
}
alert(ret); // do whatever you wish with ret.
}

Hope this helps.

Joao Rodrigues
From: JR on 24 Dec 2008 16:47
Hi David, sorry I didn't see your comments before reposting the
snippet. I agree with you in some points. Just answering partially to
Nathan's question:

"[..] I'm looking for a way to query the DOM to determine which CSS
rules apply to a particular element."

Well, what I tried to tell with my code is:

a) in FF3 and Safari 3.x, loop around window.getComputedStyle(element,
null) object. Safari has a specific method (getPropertyValue) to
retrieve the values from the object's properties;

b) in IE7, loop around element.currentStyle.

Obviously, as results may vary depending on browser version and
platform (win / mac), it's better to check for a specific style than
to looping around the styles object.

Cheers and Merry Christmas.

Joao Rodrigues
First  |  Prev  |  Next  |  Last
Pages: 1 2 3
Prev: Acronym or abbreviation? (was: solution for IE6 .setAttribute bug?)
Next: Dynamicly add dropdown lists to a form populated with php/mysql query