以前寫 javascript 要去改變 新增/刪除 元素的 Class 總是覺得 jquery 方便許多，今天想說來整理個純 javscript 實作 addClass() 和 removeClass()
目前處理元素的 Class，我們可以使用 className 及 classList(支援IE10以上及各瀏覽器，部分瀏覽器有些小限制)。
以下例子會使用到 querySelectorAll (IE8以上之瀏覽器支援)
首先看使用 className 的實作
[javascript]
function addClass(elements, classname) { // elements 為空字串或空陣列 if (!elements) { return; }
// 如果是字串則 querySelectorAll，只有一個元素則轉成陣列(方便處理) if (typeof(elements) === ‘string’) { elements = document.querySelectorAll(elements); }else if (elements.tagName) { elements = [elements]; }
// 檢查陣列中元素的 className for (var i = 0; i < elements.length; i++) { // 將目前取得的 className 前後加上空白，方便統一做 indexOf。 if ( (’ ’ + elements[i].className+’ ‘).indexOf(’ ’ + classname + ’ ’) < 0 ) { elements[i].className += ’ ’ + classname; } } }
addClass(‘body’, ‘test1’); addClass(document.body, ‘test2’);
console.log(document.body.className); // ‘test1 test2’
[/javascript]
上面這段程式碼使用 className 實作出 selector addClass 的功能
[javascript]
function removeClass(elements, classname) { // elements 為空字串或空陣列 if (!elements) { return; }
// 如果是字串則 querySelectorAll，只有一個元素則轉成陣列(方便處理) if (typeof(elements) === ‘string’) { elements = document.querySelectorAll(elements); }else if (elements.tagName) { elements = [elements]; }
// 新增要尋找的 classanme RE var reg = new RegExp(’(^| )’ + classname + ’($| )’, ‘g’);
// 利用 RE 去取代為空白 for (var i=0; i < elements.length; i++) { elements[i].className = elements[i].className.replace(reg,’ ’); } }
addClass(‘body’, ‘test1’); addClass(document.body, ‘test2’); removeClass(‘body’, test1); console.log(document.body.className); // ‘test2’
[/javascript]
上面這段程式碼則使用 className 實作出 selector removeClass 的功能
接下來我們換成使用 classList 實作 addClass() 與 removeClass()。(支援IE10 以上)
[javascript]
function addClass(elements, myClass) { // elements 為空字串或空陣列 if (!elements) { return; }
// 如果是字串則 querySelectorAll，只有一個元素則轉成陣列(方便處理) if (typeof(elements) === ‘string’) { elements = document.querySelectorAll(elements); }else if (elements.tagName) { elements = [elements]; }
// add class for (var i = 0; i < elements.length; i++) { elements[i].classList.add(myClass); } } addClass(‘body’, ‘test1’); addClass(document.body, ‘test2’);
console.log(document.body.className); // ‘test1 test2’ [/javascript]
上面這段程式碼使用 classList 實作出 addClass()
[javascript]
function removeClass(elements, myClass) { // elements 為空字串或空陣列 if (!elements) { return; }
// 如果是字串則 querySelectorAll，只有一個元素則轉成陣列(方便處理) if (typeof(elements) === ‘string’) { elements = document.querySelectorAll(elements); }else if (elements.tagName) { elements = [elements]; }</pre> <pre> // remove class for (var i=0; i < elements.length; i++) { elements[i].classList.remove(myClass); } }
addClass(‘body’, ‘test1’); addClass(document.body, ‘test2’); removeClass(‘body’, test1); console.log(document.body.className); // ‘test2’ [/javascript]
上面這段程式碼使用 classList 時作出 removeClass()
由上面可以看出 classList 的做法相對 className 簡單，但支援度需要從 IE10 開始，如果可以捨棄 IE10以下的話會好做很多XD
參考資料：