如何在 JavaScript 中擷取 HTML 元素的樣式值
從 HTML 元素擷取樣式值對於動態操作元素的外觀至關重要。雖然使用 JavaScript 設定樣式很簡單，但存取樣式標籤中定義的樣式可能會很棘手。
跨瀏覽器注意事項
存取元素樣式需要跨瀏覽器方法。 Internet Explorer 使用自己的屬性currentStyle，而其他瀏覽器則遵循W3C 標準，利用document.defaultView.getCompulatedStyle.
自訂跨瀏覽器函數
來處理跨瀏覽器-瀏覽器不一致，自訂功能常出現使用：
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
styleProp = styleProp.replace(/([A-Z])/g, "-").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;
}
}用法
擷取元素的樣式屬性：
var element = document.getElementById("box");
var width = getStyle(element, "width");目前註意事項
上述函數可能無法處理所有邊緣情況，特別是對於顏色IE 和其他瀏覽器的回傳值可能會有所不同。
以上是如何取得 HTML 元素在不同瀏覽器中的樣式值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
