Click Highlight

Code that show how to click and create an html element to highlight any html element.

by mrdesjardins

HTML

<body>
<div id="pos"></div>
    <p>Tsdasdasdasda</p>
    <p>Tsdasdasdasda</p>
    <p>Tsdasdasdasda</p>
    <p>Tsdasdasdasda</p>
    <button>test</button>
 </body>

CSS

#pos{
    position:absolute; 
    display:none;
    border:1px solid red;
    border-radius:10px;
    width:20px;
    height:20px;
}

JavaScript

function checkS(e){
// capture the mouse position
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        posx = e.clientX;
        posy = e.clientY;
    }

	document.getElementById('pos').style.left = posx-10 + 'px';
	document.getElementById('pos').style.top = posy-10+ 'px';
	document.getElementById('pos').style.display='block';
}

 document.onclick=checkS;