How to highlight HTML element on mouse click?

Question

Is it possible to write code in JavaScript that highlights the borders of the HTML element on which the mouse pointer stands (or clicks), in a similar way to what Firebug does, but without the use of a browser extension but rather rely on JavaScript alone?

If so, is it possible to get the relevant element from HTML code after the mouse click on element?

[edit] Thanks for the answers! is it possible to run those examples on external page (rather than on a page that I created) without the use of things like GreaseMonkey?

Answer 1

Here is a simple example. You should be able to build upon this:

document.onclick = function(e) {
    var event = e || window.event;

    // this is the element you want:
    var target = e.target || e.srcElement;
}

This method would probably be more preferred:

var hilightElement = function(e) {
    var event = e || window.event;

    // this is the element you want:
    var target = e.target || e.srcElement;
};

if (document.addEventListener){
    document.addEventListener('click', hilightElement, false);
} else if (document.attachEvent){
    document.attachEvent('onclick', hilightElement);
}

Answer 2

Listen for click events on the document object. You can then examine the event object to find out which element was clicked, and then alter its CSS border or outline as desired.

A very simple example, that doesn't try to account for cross browser compatibility problems would be:

document.addEventListener('click', function (e) {
        e.target.style.outline = "solid blue 1px";
});

Answer 3

Example for JQuery:

$('#myElement'/* Replace with asterisk if you want it to work for every element */).click
(
    function()
    {
        $(this).css('outline', '1px solid red');
    }
);