在JavaScript 中存取HTML 元素樣式值
人們可能會遇到需要從已在JavaScript 中定義樣式的HTML 元素中擷取樣式的情況。 CSS 樣式表。例如，考慮以下 HTML 和 CSS 程式碼：
<style>
#box { width: 100px; }
</style>
<body>
<div>只使用純 JavaScript 而不使用任何函式庫，如何檢索 width 屬性的值？以下嘗試通常會導致接收空白值：
alert(document.getElementById("box").style.width);
alert(document.getElementById("box").style.getPropertyValue("width"));這些嘗試會失敗，因為它們僅適用於元素 style 屬性中定義的內聯樣式。要檢索計算樣式，需要採用不同的方法。
跨瀏覽器相容性
由於瀏覽器之間的差異，存取計算樣式提出了挑戰。 Internet Explorer 使用 element.currentStyle 屬性，而其他瀏覽器則遵循 DOM Level 2 標準，使用 document.defaultView.getCompulatedStyle。此外，IE 使用駝峰式命名法（例如“maxHeight”）以不同方式處理具有兩個或多個單字的屬性名稱。其他瀏覽器則希望用破折號來分隔單字（例如「max-height」）。
跨瀏覽器函數
為了解決這些跨瀏覽器差異，以下函數可以使用：
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
if (defaultView && defaultView.getComputedStyle) {
styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) {
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
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;
}
}此函數提供跨瀏覽器相容性，用於存取計算樣式、處理標準行為和IE 特定行為。請注意，它可能無法處理所有情況，例如顏色，不同瀏覽器傳回的顏色不同。
以上是如何使用純 JavaScript 檢索 HTML 元素的 CSS 樣式值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
