HTML Element Picker

by Kevin Li

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML Element Picker</title>
</head>

<body>
    <!--Test HTML Source: https://stackoverflow.com/a/18675415/6798201-->
    <h1>Welcome</h1><br>
    <button class="n">Click me</button><br>
    <br>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo voluptates doloremque quisquam omnis rem fuga
        veritatis odit! Perferendis cupiditate corporis consequuntur amet ducimus quam at magni facilis debitis ut
        quisquam molestias maxime voluptatibus voluptatum minima in totam. Velit inventore deserunt facilis temporibus
        id provident illo optio ipsa aut consequuntur sed repellat dolorem obcaecati iusto ab. Placeat repellat <img
            src="http://placehold.it/200" style="float:left; margin:10px;" alt="">dolores debitis deleniti ipsum a
        accusamus in necessitatibus perferendis nostrum laudantium error modi quidem quae ab esse distinctio maiores ea
        sint doloremque dolorum quia et provident saepe natus nemo recusandae dolor atque quod aliquam! Est eum ipsam
        laudantium ad culpa consectetur aspernatur temporibus Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Magni doloribus praesentium a animi nesciunt modi vel provident ullam quia fugit dolor cupiditate aliquid!
        Veniam vitae reiciendis adipisci aliquam a deleniti omnis expedita quis natus. Velit placeat fugit officiis non
        nihil fuga dolorum veritatis maiores fugiat eligendi iste veniam tempore deserunt.</p>
    <button>More test buttons</button>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptatem a architecto nihil ullam. Non
        dolores optio ea dolorem accusantium a delectus molestias quam nulla fugit voluptas iste ipsum! Molestias id
        quaerat praesentium quo a illum optio sed...

JavaScript

const hoverBox = document.createElement("div");
console.log("hoverBox: ", hoverBox);
hoverBox.style.position = "absolute";
// change to whatever highlight color you want
hoverBox.style.background = "lightblue";
// avoid blocking the hovered element and its surroundings
hoverBox.style.zIndex = "-9999";
document.body.appendChild(hoverBox);
document.addEventListener("mouseover", (e) => {
    const target = e.target;
    const targetOffset = target.getBoundingClientRect();
    const targetHeight = targetOffset.height;
    const targetWidth  = targetOffset.width;
    // add a border around hover box
    const boxBorder = 5;
    hoverBox.style.width = targetWidth + boxBorder * 2 + "px";
    console.log(hoverBox.style.width);
    hoverBox.style.height = targetHeight + boxBorder * 2 + "px";
    // need scrollX and scrollY to account for scrolling
    hoverBox.style.top = targetOffset.top + window.scrollY - boxBorder + "px";
    hoverBox.style.left = targetOffset.left + window.scrollX - boxBorder + "px";
});