如何使用javascript读取css规则值？

ccgok5k5 于 2021-09-13 发布在 Java

关注(0)|答案(16)|浏览(621)

我想返回一个包含css规则所有内容的字符串，就像您在内联样式中看到的格式一样。我希望能够在不知道特定规则中包含的内容的情况下执行此操作，因此我不能仅通过样式名称（如 .style.width )
css：

.test {
    width:80px;
    height:50px;
    background-color:#808080;
}

迄今为止的守则：

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) {
            //this is where I can collect the style information, but how?
        }
    }
}
getStyle('.test')

JavaScript Html css

来源：https://stackoverflow.com/questions/68345341/how-to-get-elements-percent-value-set-in-css-class

16条答案

按热度按时间

lf3rwulv16#

需要注意的一些浏览器差异：
考虑到css：

div#a { ... }
div#b, div#c { ... }

给出insdel的例子，类在ff中有2个类，在ie7中有3个类。
我的例子说明了这一点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style>
    div#a { }
    div#b, div#c { }
    </style>
    <script>
    function PrintRules() {
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules
        for(var x=0;x<rules.length;x++) {
            document.getElementById("rules").innerHTML += rules[x].selectorText + "<br />";
        }
    }
    </script>
</head>
<body>
    <input onclick="PrintRules()" type="button" value="Print Rules" /><br />
    RULES:
    <div id="rules"></div>
</body>
</html>

赞(0）回复(0）举报 2021-09-13

我来回答

如何使用javascript读取css规则值？

16条答案

相关问题

热门标签

最新问答