Skip to content

[javascript] vanilla js 實作 addClass() 與 removeClass()

Published: at 05:23 AM (4 min read)

以前寫 javascript 要去改變 新增/刪除 元素的 Class 總是覺得 jquery 方便許多,今天想說來整理個純 javscript 實作 addClass() 和 removeClass()

目前處理元素的 Class,我們可以使用 classNameclassList(支援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, &nbsp;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

參考資料:

https://www.sitepoint.com/add-remove-css-class-vanilla-js/

http://caniuse.com/#search=classlist