does anyone know how i can get the id of any element when the mouse is over ?

I want to show a div (box) over the elements (tags) the mouse is over. I cannot modify the tags to include a mousover event. I want a global callback or something like that to have the id of the tag which is under the mouse pointer.

Thanks !

does anyone know how i can get the id of any element when the mouse is over ?

I want to show a div (box) over the elements (tags) the mouse is over. I cannot modify the tags to include a mousover event. I want a global callback or something like that to have the id of the tag which is under the mouse pointer.

Thanks !

• javascript
• dom
• html

• Chances are you don't care about the ID of the element being hovered. If you've got to a point where you can get the ID of an element, you probably just want to access the element itself – Gareth Commented Apr 25, 2010 at 1:34
• You're pletely right Gareth. any callback to the mouseover event giving acces to the element would be great. How do I achieve this ? – oimoim Commented Apr 25, 2010 at 10:54

3 Answers 3

You mean you want the target of the onmouseover event, so you can access the element's properties:

<script>
document.onmouseover = function(e) {
    console.log(e.target.id);
}
</script>

Take a look at Event Properties for a cross-browser way to get the target (the following example is from the aforementioned website):

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
}

So to put those together:

document.onmouseover = function(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    console.log(targ.id);
}

May not be what you're looking for. but if you use the web developer tools for firefox, you can select Information -> Display id and class details. This will display the ID and class information of every element on the page. Also using CSS -> View Style Information will allow you to hover over elements and have their class and id hierarchy displayed individually when you hover over them. I only offer this solution because I assume you don't want the functionality available to the user, but rather as a tool to debug the website.

try this

function Test(e) {
    alert(e.id);
}

<div id="newww" class="editor2 draggable1" style="position:absolute;top:100px;left:100px;border: 1px solid #aaaaaa;" onmouseover="Test(this)">
</div>