JS实现网页换肤

最新推荐文章于 2022-08-06 11:11:46 发布

原创最新推荐文章于 2022-08-06 11:11:46 发布 · 5.8k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#html #js

JavaScript 同时被 2 个专栏收录

3 篇文章

订阅专栏

html+css

2 篇文章

订阅专栏

自己看的js的文档，但是自己敲得时候就总是出错，得不到想要的效果，所以找了个视频学习，顺带把每一节的代码手敲了一遍，权当练手。
下面是js换肤的代码
html文件（JS）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>换肤测试</title>
<link id="skin-one" rel="stylesheet" type="text/css" href="css1.css" />
</head>
<script>
    function skin1() {
        var ob = document.getElementById('skin-one');
        ob.href='css1.css';
    }

    function skin2() {
        var ob = document.getElementById('skin-one');
        ob.href='css2.css';
    }
</script>
<body>
<input type="button" id="button1" onclick="skin1()" value="皮肤1"/>
<input type="button" id="button2" onclick="skin2()" value="皮肤2"/>
</body>
</html>

css1.css文件：

body{
  background: #ccc;
}

input{
  background: red;
  height: 50px;
  width: 100px;
}

css2.css文件：

body{
  background: black;
}

input{
  height: 100px;
  width: 200px;
}