javascript 动态改变样式

　　在《深入浅出javascript》中看到这样的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>Example: Style Switcher</title>
  	<link href="demoStyles.css" title="Normal" rel="stylesheet" type="text/css">
  	<link href="largePrint.css" title="Large Print" rel="alternate stylesheet" type="text/css">
  	<link href="highContrast.css" title="High Contrast" rel="alternate stylesheet" type="text/css">
  	<script type="text/javascript" src="../DOMhelp.js">
	</script>
  	<script type="text/javascript" src="styleSwitcher.js">
	</script>
</head>
<body>

...

　　忽略body的内容。。通过javascript得到link标签的内容，产生改变样式的菜单

switcher={
	menuID:'styleswitcher',
	chooseLabel:'Choose Style:',
//初始化，生成样式切换菜单。。
	init:function(){
		var tempLI,tempA,styleTitle;
		var stylemenu=document.createElement('ul');
		tempLI=document.createElement('li');
		tempLI.appendChild(document.createTextNode(switcher.chooseLabel));
		stylemenu.appendChild(tempLI);
		stylemenu.id=switcher.menuID;
		var links=document.getElementsByTagName('link');
		for(var i=0;i<links.length;i++){
			if(links[i].getAttribute('rel')!='stylesheet' && 
			links[i].getAttribute('rel')!='alternate stylesheet'){
				continue;
			}
			tempLI=document.createElement('li');
			tempA=document.createElement('a');
			styleTitle=links[i].getAttribute('title');
			tempA.appendChild(document.createTextNode(styleTitle));
			tempA.setAttribute('href','#');
			tempA.onclick=function(){
				switcher.setSwitch(this);
			}
			tempLI.appendChild(tempA);
			stylemenu.appendChild(tempLI);
		}		
		document.body.appendChild(stylemenu);
	},
	setSwitch:function(o){
		var links=document.getElementsByTagName('link');
		for(var i=0;i<links.length;i++){
			var title=o.firstChild.nodeValue;
			if(links[i].getAttribute('title')!=title){
				links[i].disabled=true;
			} else {
//ie下有bug的一段，重复按同样的标签，样式会崩溃
				links[i].setAttribute('rel','stylesheet');
				links[i].disabled=false;
			}
		}			
		return false;
	}
}
DOMhelp.addEvent(window,'load',switcher.init,false);
links[i].setAttribute('rel','stylesheet');在ie下会导致样式崩溃，不知道为何，求大神解答吧。
将样式提前设置
	init:function(){
		var tempLI,tempA,styleTitle;
		var stylemenu=document.createElement('ul');
		tempLI=document.createElement('li');
		tempLI.appendChild(document.createTextNode(switcher.chooseLabel));
		stylemenu.appendChild(tempLI);
		stylemenu.id=switcher.menuID;
		var links=document.getElementsByTagName('link');
		for(var i=0;i<links.length;i++){
			if(links[i].getAttribute('rel')!='stylesheet' && 
			links[i].getAttribute('rel')!='alternate stylesheet'){
				continue;
			}
                        //在初始化时，预设link的rel
			if(links[i].getAttribute('rel')=='alternate stylesheet'){
				links[i].setAttribute('rel','stylesheet');
			}
....

还有个bug，就是在ie下一开始选第二、第三个样式时，样式继续崩溃。
继续研究中。。
求解答~
posted @ 2011-07-16 23:39  永无霾  阅读(916)  评论(0)    收藏  举报