Ответ 1
Свойство element.style позволяет вам знать только свойства CSS, которые были определены как встроенные в этот элемент, вы должны получить вычисленный стиль, не так просто сделать это кросс-браузерным способом, как говорили другие, IE имеет свой собственный путь, через свойство element.currentStyle, стандартный способ DOM Level 2, реализованный другими браузерами, - это document.defaultView.getComputedStyle.
Однако существуют различия между способом IE и стандартным способом, например, свойство IE element.currentStyle ожидает, что вы получите доступ к CCS имена свойств, состоящие из двух или более слов в camelCase (например, maxHeight, fontSize, backgroundColor и т.д.), стандартный способ предполагает свойства со словами, разделенными тире (например, max-height, font-size, background-color и т.д.).
Кроме того, IE element.currentStyle вернет все размеры в указанном им устройстве (например, 12pt, 50%, 5em), стандартный способ рассчитает фактический размер в пикселях.
Я сделал некоторое время назад кросс-браузерную функцию, которая позволяет получить вычисленные стили кросс-браузерным способом:
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
// (hypen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
// convert other units to pixels on IE
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
Вышеупомянутая функция не идеальна для некоторых случаев, например для цветов, стандартный метод возвращает цвета в записи rgb (...), в IE они возвратят их, как они были определены.
Отметьте этот пример.