GetComputedStyle в чистом Javascript?

getComputedStyle объект не работает в Mofilla Firefox и Apple Safari, но он работает в IE, включая его старые версии (IE 6).

Как исправить эту проблему в Firefox и Safari?

Вот мой код:

    var el = document.getElementById("elementId");
    alert("Margin: "+ getComputedStyle(el, null).margin);

Ответ 1

метод getComputedStyle() возвращает объект CSSStyleDeclaration, который не имеет свойства margin (см. эту ссылку). Вместо этого используйте метод getPropertyValue(), например:

var yourDiv = document.getElementById("some-id");
getComputedStyle(yourDiv).getPropertyValue("margin-top")

Как видно из строки вышеприведенного кода, для случая полей вам нужно получить отдельные стили полей. Вы не можете использовать "margin", вы должны получить их отдельно.

Кроме того, вы можете взглянуть на эту ссылку для кросс-браузерного решения, которое использует currentStyle для Internet Explorer

Ответ 2

var elem = document.getElementById("your-div");
if (elem.currentStyle) {
    var margin = elem.currentStyle.margin;
} else if (window.getComputedStyle) {
    var margin = window.getComputedStyle(elem, null).getPropertyValue("margin");
}

alert(margin);

вы можете использовать эту прокладку, работает для всех браузеров: см. this

используйте currentStyle для Internet Explorer.

используйте getComputedStyle для других браузеров

Ответ 3

Я пробовал что-то вроде этого, и это беспокоит меня во всех браузерах

var elem = document.createElement('div');

var t=document.createTextNode('M')
elem.appendChild(t);
document.body.appendChild(elem);

var myfontSize = getStyle(elem,"fontSize")
alert(myfontSize)

function getStyle(elem,prop){
if (elem.currentStyle) {
var res= elem.currentStyle.margin;
} else if (window.getComputedStyle) {
if (window.getComputedStyle.getPropertyValue){
var res= window.getComputedStyle(elem, null).getPropertyValue(prop)}
else{var res =window.getComputedStyle(elem)[prop] };
}
return res;
}

Ответ 4

Получение атрибута этого интерфейса эквивалентно вызову Метод getPropertyValue интерфейса CSSStyleDeclaration

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

Проблема, как Дэвид Фланаган уточнил в "Javascript, окончательное руководство" только о вычисленных стилях:

Свойства ярлыка не вычисляются, а только основные свойства, на которых они основаны. Не запрашивайте свойство margin, например, но используйте marginLeft, marginTop и т.д.

И вот fooobar.com/info/227695/..., чтобы поддержать это.