（6）实现网页中换肤功能

最新推荐文章于 2024-03-23 01:11:24 发布

无人与我共黄昏

最新推荐文章于 2024-03-23 01:11:24 发布

阅读量847

点赞数

分类专栏： JavaScript案例解析

本文链接：https://blog.csdn.net/Xuan6251237011/article/details/26889797

版权

42 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

42 篇文章 0 订阅

订阅专栏

本文介绍了如何实现在网页上实现换肤功能。通过更改link标签的href属性，指向不同的CSS样式文件，达到切换主题的效果。关键在于为link标签添加ID，并编写两个函数来响应按钮的onclick事件，分别切换到不同的CSS样式。

摘要由CSDN通过智能技术生成

思路：

其实换肤换的就是css样式，只需要将link中的href路径改一下即可，首先给link加一个id。写好两个函数，然后分别在按钮中书写onclick事件分别触发两个函数。
需要注意的是：
1、任何标签都可以加id，像link、html都可以加id
2、任何一个标签中的任何一个属性都是可以修改的

css1.css文件：

@charset "utf-8"

body{
	background:black;
}

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

css2.css文件：

@charset "utf-8"

body{
	background:#CCC;
}

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

换肤页面的代码：换肤.html:

<!DOCTYPE HTML>
<!--
	其实换肤换的就是css样式，只需要将link中的href路径改一下即可，首先给link加一个id。
	写好两个函数，然后分别在按钮中书写onclick事件分别触发两个函数。

了解本专栏

关注

专栏目录