對JS 的classList 簡單記錄
阿新 • • 發佈:2018-03-26
log 資料 html BE rem 整體 技術分享 run tps
一 對classList整體感覺
瀏覽器支持參考(http://www.runoob.com/jsref/prop-element-classlist.html)
classList 是一個對象 ,返回值:一個 DOMTokenList, 包含元素的類名列表
語法:element.classList
有一個屬性 length 只讀
方法:
1.add(class1, class2, ...) 在元素中添加一個或多個類名。 如果指定的類名已存在,則不會添加
2.remove(class1, class2, ..) 移除元素中一個或多個類名。註意: 移除不存在的類名,不會報錯。
3.contains(class) 返回布爾值,判斷指定的類名是否存在。
4.item(index) index :在元素l類中的索引值。如果索引值在區間範圍外則返回 null
5.toggle(class, true|false)
第一個參數為要在元素中移除的類名,並返回 false。
如果該類名不存在則會在元素中添加類名,並返回 true。
給不支持classList的瀏覽器(ie9以及以下等)的元素添加classList屬性
也是找了下面資料 測試沒問題
參考 https://blog.csdn.net/qq_18271353/article/details/53893664
//添加數組 兼容ie8 IndexOf方法 if (!Array.prototype.indexOf){ Array.prototype.indexOf = function(elt /*, from*/){ var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len; for (; from < len; from++){ if (from in this && this[from] === elt) return from; } return -1; }; } if (!("classList" in document.documentElement)) { alert(‘瀏覽器不支持‘) var ele = window.HTMLElement || Element; Object.defineProperty(ele.prototype, ‘classList‘, { get: function() { var self = this; function update(fn) { return function(value) { var classes = self.className.split(/\s+/g), index = classes.indexOf(value); fn(classes, index, value); self.className = classes.join(" "); } } return { add: update(function(classes, index, value) { if (!~index) classes.push(value); }), remove: update(function(classes, index) { if (~index) classes.splice(index, 1); }), toggle: update(function(classes, index, value) { if (~index) classes.splice(index, 1); else classes.push(value); }), contains: function(value) { return !!~self.className.split(/\s+/g).indexOf(value); }, item: function(i) { return self.className.split(/\s+/g)[i] || null; } }; } }); } document.getElementById(‘jj‘).classList.add(‘color_1‘); document.getElementById(‘jj‘).classList.add(‘fs24‘); document.getElementById(‘jj‘).classList.add(‘bd_R‘);
對JS 的classList 簡單記錄