margin [top]结果在[Window] [Object]中

时间：2015-12-26 12:48:59

标签： javascript html css

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

但是[窗口] [对象]中的最高结果是左边距属性是否正常导致这种不良行为？

1 个答案:

答案 0 :(得分：0)

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

然而，它可以在函数内用作变量名来存储值。以下代码段似乎应该做到了。

＆＃13;
＆＃13; 
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
    );
  }
);
＆＃13; 
.info{
  z-index: 0;
  width: 700px;
  height: 500px;
  margin: auto;
  position: absolute;
  top: 0px;
  left: 0;
  bottom: 0;
  right: 0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题