JS实现网页换肤

最新推荐文章于 2024-03-26 23:03:57 发布

abyss_silver

最新推荐文章于 2024-03-26 23:03:57 发布

阅读量5.6k

点赞数 1

分类专栏： JavaScript html+css 文章标签： html js

本文链接：https://blog.csdn.net/Abyss_sliver/article/details/78065764

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html+css

2 篇文章 0 订阅

订阅专栏

自己看的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;
}

abyss_silver

关注

1
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
JS实现网页换肤

自己看的js的文档，但是自己敲得时候就总是出错，得不到想要的效果，所以找了个视频学习，顺带把每一节的代码手敲了一遍，权当练手。下面是js换肤的代码 html文件（JS）：<!DOCTYPE html><html><head><meta charset="utf-8"><title>换肤测试</title><link id="skin-one" rel="stylesheet" typ
复制链接

扫一扫