如何在 JavaScript 中跨不同浏览器检索 HTML 元素的计算样式值？

在 Javascript 中提取 HTML 元素样式值

要获取通过内联 CSS 或样式标签分配的样式属性，需要获取计算的样式而不仅仅是元素的 style 属性。这涉及利用跨浏览器兼容的方法，例如 document.defaultView.getCompulatedStyle 和 element.currentStyle。

跨浏览器兼容性

Internet Explorer 使用 element.currentStyle 而其他浏览器遵循标准 document.defaultView.getCompulatedStyle 方法。请注意，IE 要求 CSS 属性名称采用驼峰式格式，而标准格式使用破折号。

IE 上的单位转换

IE 以原始单位返回大小，而标准格式则以原始单位返回大小。方法总是转换为像素。提供的 getStyle 函数通过在必要时在 IE 上转换单位来解决此问题。

颜色格式

标准方法以 RGB 表示法返回颜色值，而 IE 将它们显示为定义的。 getStyle 函数可能无法完美处理所有情况，特别是对于颜色格式。

用于计算样式检索的自定义函数

以下 getStyle 函数提供了一种跨浏览器方法检索计算样式：

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

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