Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

highlight a DOM element on mouse over, like inspect does

We have a bookmarklet, and the user clicks a button and an inspect like highligther needs to kick in. We want to this to be cross browser.

For this we need to detect the DOM element during the mouse move, and once we have this element we need to highlight with CSS.

We have problems detecting the DOM element by mouse move, can you guide us how this is done?

Once we have this DOM element, on user click we need to extract XPath.

like image 958
Ionut Flavius Pogacian Avatar asked Jun 13 '12 08:06

Ionut Flavius Pogacian


People also ask

How do I identify a DOM element?

The easiest way to find an HTML element in the DOM, is by using the element id.

How do I grab an element from a DOM?

The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object. In the Console, get the element and assign it to the demoId variable. Logging demoId to the console will return our entire HTML element.

What is an element DOM?

In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.


Video Answer


2 Answers

You can hook mousemove on document or document.body, then use the target property of the event object to find out the topmost element the mouse is over. Then applying CSS to it is probably most easily done by adding a class to it.

But I wonder if the :hover psuedo-class might save you some trouble...

If not using :hover, here's an example:

(function() {
  var prev;

  if (document.body.addEventListener) {
    document.body.addEventListener('mouseover', handler, false);
  }
  else if (document.body.attachEvent) {
    document.body.attachEvent('mouseover', function(e) {
      return handler(e || window.event);
    });
  }
  else {
    document.body.onmouseover = handler;
  }

  function handler(event) {
    if (event.target === document.body ||
        (prev && prev === event.target)) {
      return;
    }
    if (prev) {
      prev.className = prev.className.replace(/\bhighlight\b/, '');
      prev = undefined;
    }
    if (event.target) {
      prev = event.target;
      prev.className += " highlight";
    }
  }

})();

Live copy | source

like image 177
T.J. Crowder Avatar answered Sep 23 '22 12:09

T.J. Crowder


With the help of jquery you can do something like this

$('*').hover(
    function(e){
        $(this).css('border', '1px solid black');
        e.preventDefault();
        e.stopPropagation();
        return false;
    },function(e){
        $(this).css('border', 'none');
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
);

With this code in your bookmarklet, you can load what ever code

javascript:function loadScript(src){f=document.createElement('script');if(f){f.setAttribute("type","text/javascript");f.setAttribute("src",src);document.getElementsByTagName("head")[0].appendChild(f);}};loadScript("yourscripturl");
like image 34
James Avatar answered Sep 22 '22 12:09

James