471,594 Members | 2,599 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,594 software developers and data experts.

Displaying CSS Styles on Element Mouse Over

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.

Sep 26 '07 #1
4 2639
On Wed, 26 Sep 2007 04:22:05 -0000, in
comp.infosystems.www.authoring.stylesheets splounx <sp*****@gmail.com>
<11*********************@50g2000hsm.googlegroups.c omwrote:
>| 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.
If you are using Firefox you can download the Web Developer Toolbar.
The Information submenu can do what you want and more.
-- -------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
-- -------------------------------------------------------------
Sep 26 '07 #2
On Sep 26, 5:22 am, splounx <splo...@gmail.comwrote:
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.
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/

Sep 26 '07 #3
On Sep 26, 3:05 pm, David Dorward <dorw...@gmail.comwrote:
On Sep 26, 5:22 am, splounx <splo...@gmail.comwrote:
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.

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

--
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/>.

Sep 26 '07 #4
On 2007-09-26, splounx <sp*****@gmail.comwrote:
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.
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/
Sep 27 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by travis_brooks | last post: by
8 posts views Thread by Ryan Stewart | last post: by
2 posts views Thread by Rushi | last post: by
1 post views Thread by jeffg | last post: by
2 posts views Thread by acko bogicevic | last post: by
1 post views Thread by =?Utf-8?B?UmljaA==?= | last post: by
reply views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.