如何使用 JavaScript 从 HTML 元素获取计算样式值？

使用 JavaScript 从 HTML 元素访问样式

问题：

如何检索使用 JavaScript 计算 HTML 元素的样式值，特别是当样式在

解决方案：

要获取计算样式值，需要访问元素的计算样式。有两种方法，一种是大多数浏览器支持的标准 DOM Level 2 方法，另一种是 IE 特定的 element.currentStyle 属性。

标准方法 (W3C)：

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);
  }
}

这里，属性名称必须采用连字符分隔的格式（例如“font-size”）。值将以像素为单位返回。

IE 方法：

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)) {
    // Convert non-pixel units to pixels
    ...
  }
}

IE 期望属性名称采用驼峰格式并返回指定单位的值。请注意，此方法有一定的局限性。

用法示例：

var element = document.getElementById("box");
var width = getStyle(element, "width");
console.log("Width: " + width);

以上是如何使用 JavaScript 从 HTML 元素获取计算样式值？的详细内容。更多信息请关注PHP中文网其他相关文章！