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

时间 2019-12-01

标签利用 link 标签 rel alternate stylesheet 属性实现变化页面导入样式繁體版

原文原文链接

文章出自：MuBeiBei.mejavascript

<link>标签css

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

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

经过js拿到link标签对象,disabled属性设置,能够实现变化页面导入样式表app

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

disabled = false;表示当即生效this

<!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;}