маржа-топ результаты [Window] [Object]

Question

У меня есть этот кусок 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 
); 

Но верхние результаты в [Окно] [Объект] свойство margin left отлично, что вызывает это нежелательное поведение?

Answer 1

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>