如何动态更新head标记中的CSS样式

How to update the CSS style in head tag dynamically

本文关键字：样式 CSS head 更新 何动态 动态      更新时间：2023-09-26

我有一个HTML，如下

<!DOCTYPE html>
<html>
    <head>
        <style>
            p{font-size:14pt;color:red;}
        </style>
    </head>
    <body>
        <div>
            <p class="hello"> this is a p tag </p>
            <p> this is a p without class defined</p>
            <div> this is a div tag 
                <p> this is a p tag within the div</p>
            </div>
        </div>
        <div id = "OriginalMail" class = "orgmail">
            <p> this is a Original Mail</p>
            <p class="hello"> this is a p tag </p>
            <p> this is a p without class defined</p>
            <div> this is a div tag 
                <p> this is a p tag within the div</p>
            </div>
        </div>
    </body>
</html>

我使用了一个javascript函数来限制样式仅应用于类名为orgmail的div。

var sheets = document.styleSheets;
var OriginalMail = document.getElementById("OriginalMail");
var className = OriginalMail.className;
var selectorAppender = "div." + className +  " ";
for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
        var selectorText = rules[r].selectorText;
        if(typeof selectorText !== "undefined") {
            rules[r].selectorText = selectorAppender + selectorText;
        }
    }
}

该样式仅应用于具有类名的div。

但我想修改样式标记数据也有限制

我原以为下一行会更新样式标记中的数据。

rules[r].selectorText = selectorAppender + selectorText;

请帮我解决这个问题。

很难！=(

我这样修改了你的JS：

var sheets = document.styleSheets;
var OriginalMail = document.getElementById("OriginalMail");
var className = OriginalMail.className;
var selectorAppender = "div." + className +  " ";
for (var i in sheets) {
    var rules = sheets[i].cssRules;
    for (var r in rules) {
        if(typeof rules[r] === "object") {
            var selectorText = rules[r].selectorText;
            var style = rules[r].style.cssText;
            if(typeof selectorText !== "undefined") {
                sheets[i].deleteRule(rules[r]);
                var rule = selectorAppender + selectorText + " {" + style + " }";
                sheets[i].insertRule(rule,0);            
            }
        }
    }
}

css规则的许多属性都是只读的，所以你必须删除该规则并添加一个新的css规则。

我做了一个JSFiddle。

Apolo

相关文章：