页边空白在[Window][Object]中显示

margin-top results in [Window][Object]

本文关键字：显示 Object Window 页边空白更新时间：2023-09-26

我有这片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>

.info使用特技位于屏幕中央

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

我想检索.info的裕度，因为所有属性（顶部等）都设置为0，我这样做就像这个

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
);

但是在[Window][Object]中的顶部结果margin-left属性很好，是什么导致了这种不必要的行为？

top是全局对象的属性（浏览器中的window），请参见Window.top。

然而，它可以用作函数内部的变量名来存储值。下面的代码段将执行它应该执行的操作。

window.addEventListener(
  'load',
  function ()
  {
    var el = document.querySelector('.info');
    var style = window.getComputedStyle(el);
    var elTop = style['margin-top'],
        elLeft = style['margin-left'];
    alert(
        "Top:" + elTop + ''n' +
        "Left:" + elLeft
    );
  }
);

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

<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>