利用link标签rel="alternate stylesheet"属性实现变化页面导入样式表

最新推荐文章于 2024-04-14 18:56:26 发布

weixin_33851604

最新推荐文章于 2024-04-14 18:56:26 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml python javascript ViewUI

原文链接：https://my.oschina.net/u/659171/blog/73524

本文介绍了一种使用JavaScript动态切换网页样式表的方法。通过设置link标签的disabled属性，可以在不同的CSS文件间进行快速切换，从而实现页面样式的即时变化。

2019独角兽企业重金招聘Python工程师标准>>>

文章出自：MuBeiBei.me

<link>标签

rel="stylesheet"属性指定将一个样式表立即应用到文档.

rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它

通过js拿到link标签对象,disabled属性设置,可以实现变化页面导入样式表

disabled = true;表示它不会立即生效

disabled = false;表示立即生效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<title>无标题文档</title>
<link rel="alternate stylesheet" title="body1" type="text/css" href="1.css" mce_href="1.css" media="screen" />
<link rel="alternate stylesheet" title="body2" type="text/css" href="2.css" mce_href="2.css" media="screen" />
<mce:script type="text/javascript"><!--
   
		var init = function(id){
			this.id = id;
		};
		
		init.prototype = {
			_$:function(){return typeof this.id == 'string'?document.getElementById(this.id):'';},
			_$tagS:function(tag){return typeof tag == 'string'?document.getElementsByTagName(tag):'';},
			styleInsert:function(){
				var list = this._$();
				var titles = [];
				var that = this;
				for(var i = 0; _link = this._$tagS('link')[i]; i++){(function(){
					if(this.getAttribute('rel').indexOf('style') != -1 && this.getAttribute('title')){
							var title = this.getAttribute('title');
							if(!titles[title]){
								var a = document.createElement('a');
								a.appendChild(document.createTextNode(title));
								a.setAttribute('href','#');
								a.setAttribute('title',title);
								a.setAttribute('rel',title);
								
								a.onclick = function(W3CEvent){
									W3CEvent = W3CEvent || that.getEventObject(W3CEvent);
									if(W3CEvent.preventDefault){
										W3CEvent.preventDefault();
									}else{
										W3CEvent.returnValue = false;
									}
									that.setActiveStyleSheet(this.getAttribute('rel'));
								};
								
								var li = document.createElement('li');
								li.appendChild(a);
								
								list.appendChild(li);
								
								titles[title] = true;
							}
						}
				}).call(_link)}
			},
			getEventObject:function(W3CEvent){
				return W3CEvent || window.event;
			},
			setActiveStyleSheet:function(title){
				var i,a,main;
				for(var i = 0; _link = this._$tagS('link')[i]; i++){(function(){
					if(this.getAttribute('rel').indexOf('style') != -1 && this.getAttribute('title')){
						this.disabled = true;
						if(this.getAttribute('title') == title){this.disabled = false;}
					}
				}).call(_link)}
			}
		};
		
		window.onload = function(){
			var _init = new init('styleInsert');
			_init.styleInsert();
		};
// --></mce:script>   
</head>   
<body>    
    <ul id="styleInsert"></ul> 
</body>   
</html>

/* CSS Document */
body{ color:#000099;background-color:#000099;}

/* CSS Document */
body{background-color:#FFFF00;}

转载于:https://my.oschina.net/u/659171/blog/73524