Как получить style.top с DOM, есть ли другой способ?

Question

я указал div с идентификатором testBox:

<div id="testBox"></div>

и стилизовал его в разделе заголовка:

#testBox {
        background: red;
        width: 25px;
        height: 25px;
        left: 0;
        top: 0;
            }

, затем в нижней части тела я положилJS:

var box = document.getElementById("testBox");
        console.log(box.style.left);
        console.log(box.style.width);

используйте FireBug в FireFox, но он просто скажет мне:

это пустая строка ....

Нокогда я помещаю информацию о стиле в тег div, как это:

<div id="testBox" style="background: red;width: 25px;height: 25px;"></div>

, тогда JS может выполнять свою работу, извлекать всю информацию, которую я хочу

, так что это единственный способ получитьинформация о стиле со всем этим встроенным, или я просто что-то пропустил, в конце концов я просто новичок в JS и DOM ....

Answer 1

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

var box = document.getElementById("testBox");
var style=window.getComputedStyle(box);
console.log("Height : " + style["height"]);
console.log("Width : " + style["width"]);
console.log("Left : " + style["left"]);

Answer 2

Когда вы говорите box.id, вам возвращается атрибут id элемента box, как объявлено в вашем html.

Когда вы говорите box.style, вы получаете доступ к объекту javascript, также созданному на основе вашей разметки.

Атрибуты стиля, которые не определены встроенными, не используются при создании dom-представления атрибута style.

Вот статья , которая освещает это поведение.

Однако, если вы используете библиотеку, такую ​​как jQuery, вы можете сделать

$(function(){alert($("#textBox").css("width"));});

даст вам значение CSS.

ОБНОВЛЕНИЕ:

Спасибо AVD за то, что он указал мне правильное направление: Вот метод, который использует его решение, но добавляет поддержку дляIE <9: </p>

var box = document.getElementById("testBox");
var style = window.getComputedStyle ? window.getComputedStyle(box) : box.currentStyle;

alert("Height : " + style["height"]);
alert("Width : " + style["width"]);
alert("Left : " + style["left"]);

Вот скрипка .