如何跨浏览器检索 JavaScript 中的 HTML 元素样式值？

在 JavaScript 中检索 HTML 元素样式值

对于通过 style 标签定义样式的元素，如下所示：

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

<div>

要使用 JavaScript 检索样式值，请单独使用 element.style 属性还不够，因为它只提供内联或 JavaScript 定义的样式。

计算样式

我们需要访问元素的计算样式 ，它表示从父元素继承并考虑应用的 CSS 规则后应用于其的实际样式。在 JavaScript 中，我们可以使用两种方法获取计算样式：

1. DOM 标准（其他浏览器）：

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

以上是如何跨浏览器检索 JavaScript 中的 HTML 元素样式值？的详细内容。更多信息请关注PHP中文网其他相关文章！