Displaying CSS Styles on Element Mouse Over

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

splounx - 26 Sep 2007 05:22 GMT

Hi there,

I am a relative CSS & JavaScript novice and I have a particular
problem that is beyond my level of knowledge so I thought I'd tap the
collective wisdom of this group.

I would like to know if there is a means of writing JavaScript that
will dynamically display the styles which are currently applied to any
DOM element on a web page ( i.e., those applied by ID, those applied
by class, etc.) as the user moves their mouse over them.

Ideally the styles would be displayed in a tooltip style pop-up layer
which would remain displayed until the user mouses off the element.
But how exactly the styles are displayed is not critical. The idea is
that the web page itself would act as a sort of live stylesheet
reference, dynamically revealing to the user which styles are being
applied to which elements, allowing a stylesheet author to know which
styles they need to customize to affect a given element.

I would greatly appreciate any help or suggestions you may have on how
this can be achieved in a way that will work consistently in most
popular modern browsers.

Many thanks in advance.

Reply to this Message

Jeff North - 26 Sep 2007 13:31 GMT

>| Hi there,
>|
[quoted text clipped - 20 lines]
>|
>| Many thanks in advance.

If you are using Firefox you can download the Web Developer Toolbar.
The Information submenu can do what you want and more.
-- -------------------------------------------------------------
jnorthau@yourpantsyahoo.com.au : Remove your pants to reply
-- -------------------------------------------------------------

Reply to this Message

David Dorward - 26 Sep 2007 14:05 GMT

> Ideally the styles would be displayed in a tooltip style pop-up layer
> which would remain displayed until the user mouses off the element.
[quoted text clipped - 3 lines]
> applied to which elements, allowing a stylesheet author to know which
> styles they need to customize to affect a given element.

Firebug's DOM inspector perhaps?
http://dorward.me.uk/tmp/ZZ19A0D46F.jpg
http://www.getfirebug.com/

--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/

Reply to this Message

julian.bash - 26 Sep 2007 16:30 GMT

> > Ideally the styles would be displayed in a tooltip style pop-up layer
> > which would remain displayed until the user mouses off the element.
[quoted text clipped - 8 lines]
> --
> David Dorwardhttp://dorward.me.uk/http://blog.dorward.me.uk/

If you don't use firefox (for what reason ever), use the xray
bookmarklet: <http://www.westciv.com/xray/>.

Reply to this Message

Ben C - 27 Sep 2007 22:11 GMT

> Hi there,
>
[quoted text clipped - 20 lines]
>
> Many thanks in advance.

You can use the getComputedStyle method to find the styles that apply to
an element, but it won't tell you which selectors in which stylesheets
they came from.

But just use Firebug. http://www.getfirebug.com/

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2007

Displaying CSS Styles on Element Mouse Over