473,326 Members | 2,061 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 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 2702
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Csaba2000 | last post by:
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE 5.5+). This should work regardless of whether IE has focus. Normally you would...
7
by: delerious | last post by:
I have a DIV that contains some anchors arranged vertically. On the DIV element I have an onmouseout event handler. If I move the mouse over one of the anchors, and then move it to another anchor...
1
by: travis_brooks | last post by:
greetings I had a javascript that was reliably telling me the position of an image on a page, and now its not. I was using the script to draw a bounding box that followed the mouse around over...
8
by: Ryan Stewart | last post by:
Is there a way to reset the style property of an HTML element to some default or to all empty values? I have a group of elements whose style settings may be changed arbitrarily at certain points in...
2
by: Rushi | last post by:
I want to display a text when somebody hover's over the row of the table. The data in the table row itself shouldn't be modified. I want something like the ABBR and ACRONYM tags which displays...
1
by: jeffg | last post by:
I have a DIV that needs to give the user the ability to grab its right border to resize the width of the block. I know that CSS supports properties such as cursor : col-resize to provide the...
2
by: acko bogicevic | last post by:
Hi How can i make my styles work on HyperLink web server control. I want it to be some color when the mouse is over it... Thanks. Alex *** Sent via Developersdex http://www.developersdex.com...
1
by: =?Utf-8?B?UmljaA==?= | last post by:
On my old workstation (development workstation) if I set Application/Enable XP visual styles - I was able to get/see the visual styles - like button borders highlighting when you run the mouse over...
10
by: lenzie | last post by:
I am having a very odd problem with a website I run. The menus have recently been changed to use javascript and some people are reporting that when they first use the site, Instead of a nicely...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.