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

Question

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

103

我正在寻找一种方法来获取元素的样式，这个元素的样式是通过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标签。

- stan

相关：https://dev59.com/sUzSa4cB1Zd3GeqPp9fK - BalusC

5个回答

67

我相信你现在已经能够使用Window.getComputedStyle()方法了。

MDN文档

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

获取元素宽度的示例：

window.getComputedStyle(document.querySelector('#mainbar')).width

- justina_de

12

在 jQuery中，你可以执行以下操作：alert($("#theid").css("width"))。

-- 如果你还没有了解过 jQuery，我强烈推荐它；它可以让许多简单的 JavaScript 任务变得轻松。

更新

记录一下，这篇文章已经有5年的历史了。网络已经发展、进步等等。有使用“普通的老式JavaScript”来实现此功能，而且效果更好。

- Jared Forsyth

11

他在问题中明确表示不想使用库（jQuery是一个库...）。 - awe

2

使用getComputedStyle函数，计算样式包含设置给元素的所有CSS属性。即使没有将属性设置给元素，您仍然可以在计算样式中找到该属性。

示例：


<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><style>
#Body_element {
color: green;
}
</style>

<body id="Body_element">
<script>
     alert(getComputedStyle(Body_element).color)
</script>
</body>

- Anonymous

1

如果您想从同一元素获取多个样式规则，则可以使用此帮助函数。您需要将元素和所需的样式作为参数传递给它，它将返回它们的值。

const convertRestArgsIntoStylesArr = ([...args]) => {
    return args.slice(1);
}

const getStyles = function () {
    const args = [...arguments];
    const [element] = args;

    let stylesProps = [...args][1] instanceof Array ? args[1] : convertRestArgsIntoStylesArr(args);

    const styles = window.getComputedStyle(element);
    const stylesObj = stylesProps.reduce((acc, v) => {
        acc[v] = styles.getPropertyValue(v);
        return acc;
    }, {});

    return stylesObj;
};

现在，您可以像这样使用此功能：

const styles = getStyles(document.body, "height", "width");

或者

const styles = getStyles(document.body, ["height", "width"]);

- praveen-me

- Christian C. Salvadó · Accepted Answer

element.style 属性只会返回在该元素中以内联方式（通过编程或在元素的样式属性中定义）定义的 CSS 属性，你应该获取 计算样式。

这并不容易做到跨浏览器的兼容性，因为 IE 有它自己的方式，通过 element.currentStyle 属性实现，而其他浏览器则是通过 DOM Level 2 标准方法实现的，使用document.defaultView.getComputedStyle 进行调用。

这两种方法存在差异，例如，IE 的 element.currentStyle 属性期望你使用驼峰式(camelCase)访问由两个或更多单词组成的 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中它们将按照定义的方式返回。

我目前正在撰写一篇相关文章，您可以在这里跟踪我对此函数所做的更改。