如何在不同浏览器中检索 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中文网其他相关文章！