1.classList

  1. classList对象有下列方法。
  3. add()：增加一个 class。
  4. remove()：移除一个 class。
  5. contains()：检查当前元素是否包含某个 class。
  6. toggle()：将某个 class 移入或移出当前元素。
  7. item()：返回指定索引位置的 class。

1.1 add(), remove()

  1.   <style>
  2.         .current{
  3.             color:red;
  4.         }
  5.     </style>
  8. <p id="app">hello world</p>
  9.     <button id="btn">移除class</button>
  10.     <script>
  11.         var app = document.getElementById("app");
  12.         var btn =  document.getElementById("btn");
  13.         app.onclick = function(){
  14.             this.classList.add("current")  //增加 current类，点击文本变色
  15.         }
  16.         btn.onclick =  function(){
  17.             app.classList.remove("current") // 移除current类，点击按钮取消颜色
  18.         }
  19.     </script>

1.2contains ，toggle

  1. contains()：检查当前元素是否包含某个 class
  2. toggle()：将某个 class 移入或移出当前元素
  4.  <style>
  5.         .current{
  6.             color: red;
  7.         }
  8.     </style>
  10.  <p id="app">hello world</p>
  11.     <script>
  12.         var app =  document.getElementById("app");
  13.         app.onclick =  function(){
  15.             this.classList.toggle("current")//将current移入
  16.         }