---
tags: Javascript,
disqus: hackmd
---

# javascript className的操作

在JQuery裡，我假設要對標籤新增className，
可以用addClass()這個方法來實現，element.addClass();
刪除className呢?
可以用removeClass()，element.removeClass();

## add、remove
那如果今天用JS要怎麼樣去做到新增刪除className的動作?
element.classList.add();
element.classList.remove();

---
## hasClass()
在jQ中，常常會用hasClass()，
用來去判斷或增加className上去，或是去判斷現在的狀態是什麼要不要執行某些事件，

在JS中要怎麼去達到在JQ用hasClass()這樣的方法去完成?
用自定義屬性去完成?
例如

var a = document.getElementById('logo');
a.isShow = true;

a.onclick = function(){
    if(a.isShow == true){
        a.classList.add('purple');
    }else {
        a.classList.remove('purple');
    }
    a.isShow = !a.isShow;
    
    //上面的if判斷式也可以改成用三元運算子去做
    //a.isShow = true ? a.classList.add('purple') : a.classList.remove('purple');
}

例如

var oBtn = document.querySelector('.btn');
var oBody = document.body;
var show = 0;

oImage.onclick = function(){
    for (var i = 0; i < oBody.classList.length; i++) {
        if (oBody.classList[i] == 'zoom-in') {
            show = 1;
            break;
        } else {
            show = 0;
        }
    }

    if (show == 1) {
        oBody.classList.remove('zoom-in');
        show = 0;
    } else {
        oBody.classList.add('zoom-in');
        show = 1;
    }
}
//click時先跑迴圈判斷body有沒有'zoom-in'

//有，就把show = 1  (hasClass() == true)

//無，就把show = 0  (hasClass() == false)

//接著再判斷show是0(刪除class)或1(新增class)

## contains
不過其實還有一個簡單的方法叫做contains他也是classList的其中一個方法

var element = document.getElementById('myForm').classList.contains("myForm");

element.classList.contains('myForm');

// 如果myForm這個element有myForm這個class name那就會返回ture

// 否則返回false

## toggle、item
這兩個方法還沒用過，所以就不知道了

---

參考文章
[Element.classList](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/classList)

---

###### tags: `Javascript` `class` `hasclass` `classname` `addClass` `removeClass` `contains`