js实现单一html页面两套css切换

最新推荐文章于 2022-03-03 00:43:10 发布

jswm20150115

最新推荐文章于 2022-03-03 00:43:10 发布

阅读量4.2k

点赞数

分类专栏：网站前端开发文章标签： html css js 皮肤切换

本文链接：https://blog.csdn.net/weiming8517/article/details/8788486

版权

本文介绍了如何通过JavaScript实现在单一HTML页面上动态切换两套不同的CSS样式。首先，需要引入两套CSS文件；接着，编写JS函数以实现切换功能；最后，在HTML中调用该JS函数来触发样式切换。

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

第一步：导入两套css文件

<link rel="stylesheet" type="text/css" title="样式A" href="css/people1.css" />
<link rel="alternate stylesheet" type="text/css" title="样式B" href="css/people2.css" />

第二步：写切换的js函数

<script type="text/javascript">

var title = "样式A";

function setStyle(){
	
	//只是样式A 和样式B切换
	if(title=="样式A"){
		title = "样式B";
	}else{
		title = "样式A";
	}
	
	var i,links;
	//用dom方法获取所有link元素
	links = document.getElementsByTagName("link");
	//判断每个link元素中是否含有style字符串 ，用来判断此link元素为样式表link ，同时判断此link是否包含title属性
	for(i=0; links[i]; i++){
		if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")){
			//把所有link设为disa