Получить свойства стиля

Question

У меня вопрос о получении стиля DOM с помощью javascript.

#quicklink { 
    position: absolute; 
    top: 500px; 
    left: 500px; 
} 

<div id="quicklink" class="draggable"> 
    <img class="menu_icon" src="4a.png" src="" />     
</div> 

Когда я пытаюсь получить верх элемента с помощью этого кода. Почему у него всегда есть пустое строковое значение?

var quicklink = document.getElementById('quicklink'); 
console.log(quicklink.style.top); // string value ??? 

Спасибо!

Answer 1

Это потому, что стиль не находится в DOM в качестве атрибута этого элемента ID. Вы можете попробовать getComputeStyle() для доступа к стилям, применяемым через отдельный CSS.

var elem1 = document.getElementById("elemId"); 
var style = window.getComputedStyle(elem1, null); 

MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle

W3C: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-OverrideAndComputed-h3

Answer 2

Попробуйте

function getCssProperty(elmId, property){ 
    var elem = document.getElementById(elmId); 
    return window.getComputedStyle(elem,null).getPropertyValue(property); 
} 
// You could now get your value like 
var top = getCssProperty("quicklink", "top"); 
console.log(top) 

DEMO

Answer 3

Попробуйте это:

var element = document.getElementById('quicklink'), 
    style = window.getComputedStyle(element), 
    top = style.getPropertyValue('top');