利用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;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。