Question

拥有以下代码

  <head>
    <style>
        body { background-color:green; }
    </style>            
  </head>
  <body>
    <script>
      alert(document.getElementsByTagName("BODY")[0].style.backgroundColor);
    </script>
  </body>

警报没有显示任何内容（没有结果，空字符串）。当我将样式定义移动到body标记（<body style="background-color:green">）时，它按预期工作 - 返回＆＃34;绿色＆＃34;串。为什么没有获得内部样式（在style标记内）值？

Answer 1

元素的.style属性显示由style属性设置或直接分配给元素属性但不是计算样式（HTMLElement.style）的样式。为此，您必须使用Window.getComputedStyle()

var style = window.getComputedStyle(document.getElementsByTagName("BODY")[0]);
alert(style.backgroundColor)

Answer 2

正如t.niese已经回答的那样，getComputedStyle()是应该用于获取CSS样式的JavaScript方法。

实际上做了什么？

嗯，它在浏览器窗口中呈现后会抓取样式值，并且您看不到document.body.style.backgroundColor返回的空白。

我们可以使它更健壮，更适合浏览器; currentStyle方法适用于旧版本的IE和Opera。

<html>

<head>
  <style>
    body {
      background-color: green;
    }
  </style>
</head>

<body>
  <script>
    // getComputedStyle for modern browsers, currentStyle for IE
    var style = window.getComputedStyle ? getComputedStyle(document.body) : document.body.currentStyle;
    alert(style.backgroundColor);
  </script>
</body>

</html>

请注意，此处方法返回的颜色值将为RGB。

内部css样式定义

2 个答案: