javascript 動態改變樣式

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　在《深入淺出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的relif(links[i].getAttribute('rel')=='alternate stylesheet'){links[i].setAttribute('rel','stylesheet');}....

還有個bug，就是在ie下一開始選第二、第三個樣式時，樣式繼續崩潰。

繼續研究中。。

求解答~

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More