如何使用纯 JavaScript 从 HTML 元素中检索样式值？

使用 JavaScript 从 HTML 元素检索样式值

获取 HTML 元素的样式属性对于动态操作其外观至关重要。本文深入研究了使用纯 JavaScript 检索样式值而不借助任何外部库的细微差别。

CurrentStyle 与计算属性

要访问样式值，我们需要区分内联样式（在元素的样式属性中定义）和计算属性（实际应用的样式）。

Internet Explorer使用 element.currentStyle 属性检索内联样式，该样式以原始单位保存值。

Mozilla 和其他现代浏览器依赖 document.defaultView.getCompulatedStyle 方法来提供计算属性。这些值被标准化为像素，从而在浏览器之间提供一致的表示。

跨浏览器解决方案

以下函数提供了一个跨浏览器解决方案，用于检索内联和内联计算样式：

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // Convert styleProp to compatible notation
  styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
  // Modern browsers: computed properties
  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE: inline properties
    // Convert styleProp to camelCase notation
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // Normalize units 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;
  }
}

示例

要检索 id 为“box”的元素的内联宽度属性（通过样式标签设置）：

alert (getStyle(document.getElementById("box"), "width"));

要检索计算的宽度属性，该属性需要考虑任何级联或继承样式：

alert (getStyle(document.getElementById("box"), "width"));

限制

此函数不能完美处理颜色值。现代浏览器将以 rgb 表示法返回颜色，而 IE 将保留其原始定义。

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