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

从左边找到元素的距离

1 个答案: