javascript - 如何在 JavaScript 中获取 HTML 元素的样式值？

Question

我正在寻找一种方法，从具有由样式标记设置的样式的元素中检索样式。

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

在体内

<div id="box"></div>

我正在寻找不使用库的直接 JavaScript。

我尝试了以下操作，但仍然收到空白:

alert (document.getElementById("box").style.width);  
alert (document.getElementById("box").style.getPropertyValue("width"));

我注意到，如果我使用 javascript 设置了样式，则只能使用上述内容，但无法使用样式标签。

Answer 1

element.style属性让您只知道在该元素中定义为内联的CSS属性(以编程方式，或在元素的样式属性中定义)，您应该获得计算的样式 .

跨浏览器的方式并不是那么容易做到的，IE有自己的方式，通过element.currentStyle属性，以及DOM Level 2标准方式，其他浏览器实现是通过document.defaultView.getComputedStyle方法。

两种方式有区别，例如IE element.currentStyle属性期望您访问由两个或多个驼峰命名法单词组成的 CCS 属性名称(例如 maxHeight、fontSize、backgroundColor 等)，标准方法需要用破折号分隔单词的属性(例如 max-height、font-size、background-color等)。

此外，IE element.currentStyle 将以指定的单位返回所有尺寸(例如 12pt、50%、5em)，标准方法将以像素为单位计算实际尺寸总是。

我前段时间做了一个跨浏览器函数，可以让你以跨浏览器的方式获取计算样式:

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, "-$1").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;
  }
}

上述函数在某些情况下并不完美，例如对于颜色，标准方法将以 rgb(...) 表示法返回颜色，在 IE 上它们将按原样返回颜色已定义。

我目前正在写该主题的一篇文章，您可以关注我对此函数所做的更改here .