javascript 之 className屬性

本文轉載自查看原文 2015-12-11 15:26 4119 JavaScript隨筆/ className JavaScript

　　Javascript 可以通過className 屬性靈活的更改一個標簽元素的CSS 類選擇器來實現樣式的變化。

　　1、用className 屬性修改節點的css類別

　　代碼如下：

 1 <html> 
 2 <head> 
 3 <title>追加CSS類別</title> 
 4 <style type="text/css"> 
 5 .myUL1{ 
 6 　　color:#0000FF; 
 7 　　font-family:Arial; 
 8 　　font-weight:bold; 
 9 } 
10 .myUL2{ 
11　　 text-decoration:underline; 
12 } 
13 </style> 
14 <script language="javascript"> 
15 function check(){ 
16 　　var oMy = document.getElementsByTagName("ul")[0]; 
17 　　oMy.className = " myUL2"; //修改CSS類 
18 } 
19 </script> 
20 </head> 
21 <body> 
22 <ul onclick="check()" class="myUL1"> 
23 　　<li>HTML</li> 
24 　　<li>JavaScript</li> 
25 　　<li>CSS</li> 
26 </ul> 
27 </body> 
28 </html>

　　運行結果：

　　點擊之后為

　　2、追加css類別

 1 <html> 
 2 <head> 
 3 <title>追加CSS類別</title> 
 4 <style type="text/css"> 
 5 .myUL1{ 
 6 　　color:#0000FF; 
 7 　　font-family:Arial; 
 8 　　font-weight:bold; 
 9 } 
10 .myUL2{ 
11 　　text-decoration:underline; 
12 } 
13 </style> 
14 <script language="javascript"> 
15 function check(){ 
16 　　var oMy = document.getElementsByTagName("ul")[0]; 
17 　　oMy.className += " myUL2"; //追加CSS類,注意" myUL2"前面的空格. 
18 } 
19 </script> 
20 </head> 
21 <body> 
22 <ul onclick="check()" class="myUL1"> 
23 　　<li>HTML</li> 
24　　 <li>JavaScript</li> 
25　　 <li>CSS</li> 
26 </ul> 
27 </body> 
28 </html>

　　運行時，單擊列表后，實際上<ul> 的class 屬性變為：
　　　　<ul onclick="check()" class="myUL1 myUL2">

　　所以添加css類別的時候類名之前一定要添加空格，才可以實現屬性追加。重要的事情說三遍，加空格！加空格！！加空格！！！

　　運行結果如下：

　　　　點擊之后為

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript中的屬性:如何遍歷屬性 JavaScript監聽屬性改變 javascript遍歷對象的屬性 JavaScript實現私有屬性 Javascript靜態屬性和方法 JavaScript——類的根據屬性名_獲取/修改_屬性 javascript的navigator對象及屬性userAgent javascript 刪除對象的屬性 delete JavaScript之獲取和設置元素屬性 Javascript中prototype屬性詳解