CODEWITHSUNDEEP
javascriptdomhtml
oimoim
oimoim

Reputation: 449

Getting id of any tag when mouseover

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 !

Upvotes: 6

Views: 18059

Answers (3)

Vaseem AbdulSamad
Vaseem AbdulSamad

Reputation: 54

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>

Upvotes: 0

karim79
karim79

Reputation: 342635

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);
}

Upvotes: 10

Kibbee
Kibbee

Reputation: 66122

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.

Upvotes: 0

Related Questions