如何在不使用庫的情況下在 JavaScript 中存取 HTML 元素樣式值？

在沒有函式庫的情況下在JavaScript 中存取HTML 元素樣式值

簡介：

操作HTML 元素的樣式屬性至關重要動態Web 應用程式的一個面向。這個問題探討如何從透過

擷取樣式值：

擷取使用

跨瀏覽器方法：

取得跨瀏覽器的計算樣式可能很棘手。 Internet Explorer（IE）有自己的機制，element.currentStyle，而其他瀏覽器則使用 document.defaultView.getCompulatedStyle 方法。

跨瀏覽器功能：

To為了簡化這個跨瀏覽器的實現，可以定義一個名為getStyle() 的函數：

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 convertIEValueToPixels(value);
    }
    return value;
  }
}

這個函數清理屬性名稱以實現跨瀏覽器相容性並處理IE 上的單位轉換。

用法：

要擷取特定樣式屬性，請使用getStyle() 函數所需的屬性名稱，例如如下：

var width = getStyle(document.getElementById("box"), "width");

限制：

getStyle()函數提供了一種有用的跨瀏覽器方法。但是，它有局限性，特別是在處理某些屬性（例如顏色）時，IE 可能會傳回定義的值而不是計算的值。例如，定義為 #ff0000 的顏色屬性可能在呼叫 getStyle() 時傳回紅色。

以上是如何在不使用庫的情況下在 JavaScript 中存取 HTML 元素樣式值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！