js动态修改整个页面样式（换肤）

最新推荐文章于 2024-04-11 02:20:46 发布

疯汉三

最新推荐文章于 2024-04-11 02:20:46 发布

阅读量1.1k

点赞数

分类专栏： javascript 常用文章标签： javascript css 切换css 换肤

本文链接：https://blog.csdn.net/mmmv390/article/details/26588653

版权

javascript 常用专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jsPro1\js动态修改整个html页面样式(换肤).html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>动态修改页面样式</title>
        <link href="css/blue.css" rel="stylesheet" id="mylink"/>
        <script type="text/javascript">
            function gel(id) {
                return document.getElementById(id);
            }

            window.onload = function() {
                //更换css文件
                var lis = gel("uList").childNodes;
                for (var i = 0; i < lis.length; i++) {
                    if (lis[i].nodeType == 1) {
                        lis[i].onclick = function () {
                            gel("mylink").href = "css/" + this.className + ".css";
                        };
                    }
                }
            };
            
        </script>
    </head>

<body>
    <div>
        <span>修改整个页面的样式</span><br/>
        <input type="text"  id="txt"/>
        <input type="button" value="提交" class="btn"/>
    </div>
    
    <ul id="uList" style="text-decoration: none;margin-top: 100px;">
        <li style="display: block;width: 30px;height: 20px;background-color: red;" class="red"></li>
        <li style="display: block;width: 30px;height: 20px;background-color: blue" class="blue"></li>
    </ul>
</body>
</html>

jsPro1\css\red.css

* {
    margin: 0px;padding: 0px;
}


body {
    background-color: #eeeeee;
}
span {
    color: red;
}
#txt {
    color: #f00;border: 1px solid #7d1515;
}
.btn {
    background-color: #a52a2a;border: none;color: white;width: 100px;height: 28px;
}

jsPro1\css\blue.css

* {
    margin: 0px;padding: 0px;
}


body {
    background-color: #eeeeee;
}
span {
    color: blue;
}
#txt {
    color: #0000cd;border: 1px solid #006400;
}
.btn {
    background-color: #0000cd;border: none;color: white;width: 100px;height: 28px;
}