Question

我知道我必须在这里遗漏一些东西，但我似乎无法让它发挥作用。

我使用文档head部分内的样式标记为html文档的主体指定了背景颜色，但是当我尝试通过JavaScript阅读它时，我什么也得不到：

<html>
<head>
<style>
body { background-color: #ff0; }
</style>
</head>
<body>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

..但是，如果我将样式分配为内联，则可以：

<html>
<head></head>
<body style='background-color: #ff0;'>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

我知道我遗漏了一些基本的东西，但我的思绪今天不在这个区域 - 谁能告诉我为什么我的第一个场景不起作用？

由于

Answer 1

DOM元素的style属性仅指元素的内嵌样式。

根据浏览器的不同，您可以使用DOM CSS

获取元素的实际样式

在firefox中，例如：

var body = document.getElementsByTagName("body")[0];
var bg = window.getComputedStyle(body, null).backgroundColor;

或者在IE中：

var body = document.getElementsByTagName("body")[0];
var bg = body.currentStyle.backgroundColor;

Answer 2

在这种情况下，由于尚未设置style属性，因此您需要元素上的computedStyle。在IE中，您需要通过something like this检查元素的currentStyle属性。

Answer 3

以下是here InsDel发布{{3}}后可以使用的功能（不使用框架ie）：

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
                (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
        }
    }
}
getStyle('.test')

Answer 4

这就是css的工作方式。没有直接的方法来获取Javascript中元素的计算css属性，我知道，缺少浏览器特定的实用程序。

从Javascript中读取非内联CSS样式信息

4 个答案: