Question

有什么方法可以从浏览器控制台中获取信息（例如：图像的坐标）吗？

Answer 1

您可以使用getBoundingClientRect（）方法。我选择将其打印在页面上，但是您当然可以将其打印到控制台上。

    var myPlace = document.getElementById("my-place");
    var img = document.getElementById("image");
    var clientRect = img.getBoundingClientRect();
    var posLeft = clientRect.left;
    var posTop = clientRect.top;
    myPlace.innerHTML = `top: ${posLeft} left: ${posTop}`

    .container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

 <div class="container">
            <img id="image" src="https://source.unsplash.com/random/800x400" alt="">
            <div id="my-place"></div>
</div>

从浏览器控制台获取数据

1 个答案: