开发者问题收集

如何在 JavaScript 中获取 HTML 元素的样式值?

2010-04-18
266795

我正在寻找一种方法来从已通过 style 标签设置样式的元素中检索样式。

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

在正文中

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

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

我尝试了以下操作,但一直收到空白:

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

我注意到,如果我使用 javascript 设置了样式,我只能使用上述方法,但无法使用 style 标签。

3个回答

element.style 属性仅让您知道在该元素中定义为 inline 的 CSS 属性(以编程方式或在元素的 style 属性中定义),您应该获取 计算的样式

以跨浏览器的方式执行此操作并不容易,IE 有自己的方式,通过 element.currentStyle 属性,而其他浏览器实现的 DOM Level 2 标准 方式是通过 document.defaultView.getComputedStyle 方法。

两种方式有区别,例如,IE 的 element.currentStyle 属性要求您访问由两个或多个 camelCase 格式的单词组成的 CCS 属性名(例如 maxHeightfontSizebackgroundColor 等),标准方法需要用破折号分隔单词的属性(例如 max-heightfont-sizebackground-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(...) 表示法返回颜色,即它们将按照定义的方式返回它们。

我目前正在撰写一篇关于该主题的文章,您可以在 这里 关注我对此函数所做的更改。

Christian C. Salvadó
2010-04-18

我相信您现在可以使用 Window.getComputedStyle()

var style = window.getComputedStyle(element[, pseudoElt]);

获取元素宽度的示例:

window.getComputedStyle(document.querySelector('#mainbar')).width
justina_de
2017-07-12

jQuery 中,您可以执行 alert($("#theid").css("width"))

-- 如果您还没有看过 jQuery,我强烈推荐它;它使许多简单的 javascript 任务变得毫不费力。

更新

据记录,这篇文章已有 5 年历史。网络已经发展、前进等等。有办法使用 Plain Old Javascript 来实现这一点,这更好。

Jared Forsyth
2010-04-18