html动态加载style标签

最新推荐文章于 2024-05-22 07:03:18 发布

zfyljx

最新推荐文章于 2024-05-22 07:03:18 发布

阅读量562

点赞数 8

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_41334434/article/details/135206305

版权

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>动态加载Style标签</title>  
</head>  
<body>  
    <button onclick="addStyle()">点击添加样式</button>  
  
    <script>  
        function addStyle() {  
            // 创建一个新的style元素  
            var style = document.createElement("style");  
              
            // 设置样式的内容  
            style.innerHTML = `  
                body {  
                    background-color: lightblue;  
                }  
                  
                h1 {  
                    color: navy;  
                }  
            `;  
              
            // 将样式添加到head元素  
            document.head.appendChild(style);  
        }  
    </script>  
</body>  
</html>