javascript - 查找元素与左侧的距离

Question

我使用技巧将元素居中放置在屏幕中间

.info{
    z-index: 0;
        width: 700px;
        height: 500px;
        margin: auto;
        position: absolute;
        top: 0px;
        left: 0;
        bottom: 0;
        right: 0;
    }

在该元素内我有另一个元素，我如何检索该元素与左上角的距离？我已经尝试过 offsetLeft 属性，但它返回 0 ，由于我提到的将所有属性都设置为 0 的技巧，我该如何克服这个问题？ html

<div class="info">

    <div class="vyrobky">
<div class="vyrobky_holder">
<ul>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
    </ul>
</div>

</div></div>

Answer 1

因为您用边距定位了框并将 top、left、right、bottom 属性设置为0，框与其父框之间没有任何距离。

但是您可以获得计算出的 margin 值，这些值是指内容与父元素之间的空间。

var el = document.querySelector('.info');
var style = window.getComputedStyle(el);

var top = style['margin-top'],
    left = style['margin-left'];

alert(
    "Top:" + top + '\n' +
    "Left:" + left
);

Fiddle