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

在 JavaScript 中擷取 HTML 元素樣式值

在 JavaScript 中，取得元素的內嵌樣式非常簡單。然而，存取透過

為了擷取計算的樣式值，JavaScript 提供了 getCompulatedStyle 方法，可透過 document.defaultView 物件存取。此方法標準化了跨瀏覽器樣式檢索並呈現轉換為像素單位的值。使用方法如下：

let element = document.getElementById("box");
let width = getComputedStyle(element).getPropertyValue("width");

對於 Internet Explorer 等較舊的瀏覽器，則需要不同的方法。 IE 支援element.currentStyle 屬性，該屬性要求樣式屬性名稱採用駝峰格式，並以原始單位傳回值：

let width = element.currentStyle.width;

為了確保跨瀏覽器相容性，您可以使用以下輔助函數：

function getStyle(element, styleProp) {
  let value;
  if (document.defaultView && document.defaultView.getComputedStyle) {
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    value = getComputedStyle(element).getPropertyValue(styleProp);
  } else if (element.currentStyle) {
    styleProp = styleProp.replace(/\-(\w)/g, str => str[1].toUpperCase());
    value = element.currentStyle[styleProp];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return convertPixelValue(value);
    } else {
      return value;
    }
  }
  return value;
}

此函數處理瀏覽器之間的差異，轉換IE 舊屬性和單位格式以匹配標準。有了這個助手，您可以跨瀏覽器一致地取得計算出的樣式值。

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