如何在 JavaScript 中跨不同瀏覽器檢索 HTML 元素的計算樣式值？

在Javascript 中提取HTML 元素樣式值

要取得透過內聯CSS 或樣式標籤分配的樣式屬性，需要取得計算的樣式而不僅僅是元素的style 屬性。這涉及利用跨瀏覽器相容的方法，例如 document.defaultView.getCompulatedStyle 和 element.currentStyle。

跨瀏覽器相容性

Internet Explorer 使用 element.currentStyle 而其他瀏覽器遵循標準 document.defaultView.getCompulatedStyle 方法。請注意，IE 要求 CSS 屬性名稱採用駝峰式格式，而標準格式使用破折號。

IE 上的單位轉換

IE 以原始單位傳回大小，而標準格式則以原始單位傳回大小。方法總是轉換為像素。提供的 getStyle 函數透過在必要時在 IE 上轉換單位來解決此問題。

顏色格式

標準方法以 RGB 表示法傳回顏色值，而 IE 將它們顯示為定義的。 getStyle 函數可能無法完美處理所有情況，特別是顏色格式。

用於計算樣式擷取的自訂函數

以下 getStyle 函數提供了一個跨瀏覽器方法擷取計算樣式：

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, "-").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;
  }
}

以上是如何在 JavaScript 中跨不同瀏覽器檢索 HTML 元素的計算樣式值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！