logo标签列表

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

javascriptcss
4

我知道我可能漏掉了一些东西，但似乎无法让它起作用。

我已经使用文档头部内的样式标签为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>

我知道我漏掉了一些基础知识，但今天我的头脑不在状态 -- 有人能告诉我为什么我的第一个方案不起作用吗？

谢谢

https://dev59.com/p0jSa4cB1Zd3GeqPDCyG#1048382 - Maciej Łebkowski
请查看以下内容：https://dev59.com/hHRC5IYBdhLWcg3wW_pk - Peter
4个回答
7

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;
4
在这种情况下，由于尚未设置style属性，因此您需要使用元素上的computedStyle。 在IE中，您需要通过类似以下的方式检查元素的currentStyle属性。请注意，保留HTML标记。
1

这里是一个函数，您可以使用它（不需要使用框架），该函数由InsDel在此处发布：

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')
0

这就是 CSS 的工作方式。在 JavaScript 中，我不知道有没有直接获取元素计算后的 CSS 属性的简单方法，除了使用特定于浏览器的实用程序。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接