Question

如何通过css更改变量：root jquery？

:root {
      --color: #E72D2D;
}
.box-icon {
    background-color: var(--color);
}

这不起作用

    $("#blueColor").click(function(e) {
        $(":root").css("--color", "#137581");
    }

Answer 1

<!DOCTYPE html>
<html>
<head lang="ru">
    <meta charset="UTF-8">
    <title>qwabra</title>
    <style>
        * { color: var(--color, black); }
    </style>
    <style id="jqCSS"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
    $("#jqCSS").html("");
    function qwa(inch){
        for (var i in inch ) {
            $("#jqCSS").append(i+" {");
                for (var j in inch[i] ) {
                    $("#jqCSS").append(j+":"+inch[i][j]+";");
                };
            $("#jqCSS").append("}");
        };
    };
qwa({ ":root":{"--color":"blue"} });
qwa({ "div":{ "--color": "green"} });
qwa({ "#alert":{ "--color": "red"}, "a":{ "text-decoration":"none" }, "a:hover":{ "text-decoration": "underline" } });
qwa({ "p":{ "background-color": "rgba(128, 128, 128, 0.44);","border": "solid 1px"} });
});
</script>
</head>
<body>


<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
  While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>
    <a href="#">href</a>
</div>

</body>
</html>

Answer 2

此功能正常！

$("#blueColor").click(function(e) {
    document.documentElement.style.setProperty('--color', "#137581");
});

或

$("body").get(0).style.setProperty("--color", "#137581");

如何通过jquery更改变量：root css？

2 个答案: