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

最新推荐文章于 2024-10-24 19:20:43 发布

原创

最新推荐文章于 2024-10-24 19:20:43 发布 · 4.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js #皮肤 #切换

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

第一步：导入两套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设为disabled
			links[i].disabled = true;
			//再来判断title中是否有指定的title字符串 有则把当前的link设为可视 即激活当前的link 
			if(links[i].getAttribute("title").indexOf(title) != -1){
				links[i].disabled = false;
				//alert("ok");
			}
				
		}
	}
}

</script>