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

在JavaScript 中擷取HTML 元素樣式值

對於透過style 標籤定義樣式的元素，如下所示：

<style>
#box {
  width: 100px;
}
</style>

<div>
<p>要使用JavaScript 擷取樣式值，請單獨使用<strong>element.style</strong>屬性還不夠，因為它只提供內聯或 JavaScript 定義的樣式。 </p>
<p><strong>計算樣式</strong></p>
<p>我們需要存取元素的<strong>計算樣式</strong> ，它表示從父元素繼承並考慮應用的CSS 規則後應用於其的實際樣式。在JavaScript 中，我們可以使用兩種方法來取得計算樣式：</p>
<p><strong>1. DOM 標準（其他瀏覽器）：</strong></p>
<pre class="brush:php;toolbar:false">document.defaultView.getComputedStyle(element, null).getPropertyValue(propertyName);

2. IE 特定：

element.currentStyle[propertyName];

但是，IE使用駝峰命名法屬性名稱（例如“font-Size”），並且可能會傳回非像素單位的大小，而標準方法使用連字屬性名稱（例如，“字體大小”）並始終提供像素

跨瀏覽器解決方案

要以跨瀏覽器相容的方式檢索計算樣式，請使用以下函數：

function getStyle(element, property) {
  var value, defaultView = (element.ownerDocument || document).defaultView;
  // Sanitize property name for different browsers
  property = property.replace(/([A-Z])/g, "-").toLowerCase();

  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(element, null).getPropertyValue(property);
  } else if (element.currentStyle) {
    // Convert camelCase property name to hyphenated
    property = property.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });

    value = element.currentStyle[property];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return (function(value) {
        var oldLeft = element.style.left, oldRsLeft = element.runtimeStyle.left;
        element.runtimeStyle.left = element.currentStyle.left;
        element.style.left = value || 0;
        value = element.style.pixelLeft + "px";
        element.style.left = oldLeft;
        element.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}