js的classlist的簡單介紹

本文目錄一覽：

• 1、js中classlist怎麼使用
• 2、javascript中classlist的問題
• 3、JS之classList對象
• 4、原生js判斷某個元素是否有指定的class名的幾種方法
• 5、如何對js添加的類進行操作？

js中classlist怎麼使用

前，jQuery的hasClass、addClass、removeClass我們已經再熟悉不過了，然而我們並不會在每一個項目中都會去使用jQuery或者Zepto，譬如在移動端的網頁中，考慮到傳說中的性能和靜態資源的請求量等因素，我們通常會選擇採用原生js，而對於元素的class操作。

javascript中classlist的問題

先價檢查 rotaGroup[k] 是否是HTML dom 對象

然後檢查 瀏覽器是否支持

JS之classList對象

相比將 element.className 作為以空格分隔的字符串來使用， classList 是一種更方便的訪問元素的類列表的方法。

原生js判斷某個元素是否有指定的class名的幾種方法

//第一種方法，用classList這個H5 API，有兼容性問題

if(p[i].classList.contains(‘test’)==true){

console.log(p[i].innerHTML);

}

//第二種方法，用className這個屬性

if(p[i].className==’test’){

console.log(p[i].innerHTML)

}

//第三種方法，用getAttribute()這個方法

if(p[i].getAttribute(“class”)==’test’){

console.log(p[i].innerHTML);

}

}

以上三種可以任選，條件是不考慮兼容性和多個class名的情況

如何對js添加的類進行操作？

因為`.manage2`樣式是在事件中添加到#manage元素的，第二段代碼執行時該元素尚未被賦予.manage2樣式， 所以獲取不到這個元素也沒添加有效的事件。

看你這段代碼， .manage1、.manage2應該都是id為manage的元素，

首先能用ID獲取就不要用樣式獲取， 因為ID獲取元素的效率最快。

其次， 同一元素多次被使用時， 用變量暫存，

代碼更改如下， 如果不對， 請上傳相應的HTML：

var box = document.getElementById(‘box’),

    boxClassList = box.classList;

    manage = document.getElementById(‘manage’),

    manageClassList = manage.classList;

manage.onclick = function(){

    manageClassList.remove(‘manage1’);

    manageClassList.add(‘manage2’);

    boxClassList.add(‘addr-add’);

    manage.onclick = function(){

        boxClassList.remove(‘addr-add’);

        boxClassList.add(‘addr-delete’);

    }

};