DOMのclassListを使ってみる

classListとは

classListはHTML5で追加された比較的新しいプロパティです。
リスト化されたことによりclassNameプロパティで直接操作するより簡便にクラスを変更できるようになりました。

JavaScriptでスタイルをアクティブに変更するのに便利です。

classListのメソッド

メソッド名	機能
add(class)	クラスリストへクラスを追加
remove(class)	クラスリストからクラスを削除
contains(class)
toggle(class)	クラスリストにclassが含まれていれば削除、なければ追加
item(number)	クラスリストの番号を入れることで名前を取得
length	クラスリストの要素数

toggleを使った例

view plainprint?

1. <!--doctype html-->  
2.   
3.   
4.  <meta charset="UTF-8">  
5.  <link rel="stylesheet" type="text/css" href="../css/html5reset.css">  
6.  <!--[if lt IE 9]>  
7.  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
8.  <![endif]-->  
9.  <title>classList</title>  
10. <script>  
11.   
12. window.onload = function() {  
13.  var home = document.getElementById("home");  
14.  var com = document.getElementById("com");  
15.  var item = document.getElementById("item");  
16.  var info = document.getElementById("info");  
17.   
18.  home.onclick = changeStyle;  
19.  com.onclick = changeStyle;  
20.  item.onclick = changeStyle;  
21.  info.onclick = changeStyle;  
22.   
23. }  
24.   
25. function changeStyle() {  
26.  this.classList.toggle('button');  
27.  this.classList.toggle('pushed-button');  
28. }  
29.   
30. </script>  
31. <style>  
32.   
33.   
34. #menu li {  
35.  width: 120px;  
36.  padding: 6px 10px;  
37.  border-top: 1px solid lightcyan;  
38. }  
39.   
40. #menu li:last-child {  
41.  border-bottom: 1px solid lightcyan;  
42. }  
43.   
44. .label {  
45.  font-family: Verdana, "ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif;  
46.  font-size: 1.1em;  
47. }  
48.   
49. .button {  
50.  background-color: dodgerblue;  
51.  color: lightcyan;  
52. }  
53.   
54. .pushed-button {  
55.  background-color: lightcyan;  
56.  color: dodgerblue;  
57. }  
58.   
59.   
60.   
61. </style>  
62.   
63.   
64. <div id="container">  
65.  <h1>classList</h1>  
66.  <ul id="menu">  
67.   <li id="home" class="label button">Home</li>  
68.   <li id="com" class="label button">Company</li>  
69.   <li id="item" class="label button">Item</li>  
70.   <li id="info" class="label button">Infomation</li>  
71.  </ul>  
72. </div>  

 
 
 
 





 
classList
 

  
Home
  
Company
  
Item
  
Infomation