JavaScript動態更改引入樣式表

admin發表於2018-07-09
JavaScript

本章節如何動態設定頁面的css樣式屬性，比如頁面的換膚效果也是通過此方式實現的。

當然比較完善的換膚效果要稍稍複雜一些，這只是介紹一下如何更改外部css樣式表。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<link href="css/blue.css" rel="stylesheet" id="mylink"/>
<script type="text/javascript"> 
function gel(id){ 
  return document.getElementById(id); 
} 
window.onload=function(){ 
  var lis=gel("uList").childNodes; 
  for (var i = 0; i < lis.length; i++){ 
    if(lis[i].nodeType==1){ 
      lis.onclick = function () { 
        gel("mylink").href = "css/" + this.className + ".css"; 
      }; 
    } 
  } 
}; 
</script>
</head>
<body>
<div> <span>螞蟻部落歡迎您</span><br/>
  <input type="text" id="txt"/>
  <input type="button" value="提交" class="btn"/>
</div>
<ul id="uList">
  <li style="width:30px;height:20px;background-color:red;" class="red"></li>
  <li style="width:30px;height:20px;background-color:blue" class="blue"></li>
</ul>
</body>
</html>

以上程式碼點選li元素可以切換不同的樣式表效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function gel(id){return document.getElementById(id);}，封裝了一下document.getElementById()函式，使用更方便。

（2）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（3）.var lis=gel("uList").childNodes，獲取ul元素下的所有子節點，包括文字節點和元素節點，空白和換行屬於文字節點。

（4）.for (var i = 0; i < lis.length; i++)，遍歷每一個節點。

（5）.if(lis.nodeType==1)，判斷節點是否是元素節點。

（6）.lis.onclick = function () {gel("mylink").href = "css/" + this.className + ".css";}，註冊click事件處理函式，也就是點選li元素就會重新設定link標籤的href屬性值。

二.相關閱讀:

（1）.nodeType屬性參閱js nodeType屬性一章節。

（2）.childNodes屬性參閱js childNodes一章節。 

（3）.className參閱js className一章節。

相關文章