Javascript list CSS effectors by element?

[Derik]

Can Javascript look at an element node and tell me what CSS code
is affecting it? What's being specifically set to it- what it's
inheriting from other rules? Can it tell me the current value of all
its cumulative BOX model transformations-- not necessarily as
currently laid out on the screen, but in terms of the abstract forces
acting on this element? Can it tell me the font size of a text note
in pts pixels or em's that's been transformed by several nested font-
size:##% rules?

And perhaps most importantly- can it do any of this in less than,
oh... 35 lines of code? (80% of anything worth doing can be done in
35 lines of code or less.)

...I have no idea what I'd /use/ this for-- Firebug supplies my
most pressing need without killing myself with code, but it seems like
there's got to be a use to it, so I want to know!

-Derik

 

[Thomas 'PointedEars' Lahn]

Can Javascript look at an element node and tell me what CSS code is
affecting it?

There is no such thing as a CSS node.

What's being specifically set to it-
Yes.

what it's inheriting from other rules?

Not at a glance, you will have to analyze document.styleSheets and to
traverse the document tree yourself. Maybe you can borrow algorithms from
existing libraries.

Can it tell me the current value of all its cumulative BOX model
transformations-- not necessarily as currently laid out on the screen,
but in terms of the abstract forces acting on this element?

AIUI, you are looking for document.defaultView.getComputedStyle(elemNodeRef,
sPseudoEl) in W3C DOM implementations, and elemNodeRef.currentStyle in
MSHTML DOM implementations.

Can it tell me the font size of a text note in [...] pixels

Yes, that is the default.

or em's that's been transformed by several nested font-size:##% rules?

No, you have to calculate that yourself.

And perhaps most importantly- can it do any of this in less than, oh...
35 lines of code? (80% of anything worth doing can be done in 35 lines
of code or less.)

Calling ViewCSS::getComputedStyle() or reading the `currentStyle' property
takes one line. You will have to do feature tests, of course, and access
individual style properties, which will add a few lines.


HTH

PointedEars

 

[Thomas 'PointedEars' Lahn]

There is no such thing as a CSS node.

^^^^
Sorry, Freudian misreading


PointedEars

 

[Derik]

Calling ViewCSS::getComputedStyle() or reading the `currentStyle' property
takes one line. You will have to do feature tests, of course, and access
individual style properties, which will add a few lines.

Idle curiosity--REWARDED! 25 days after asking a blue sky question, I
now have a need of this function!

Kind stranger, I give you thanks-- FROM THE FUTURE!

-Derik