教你js对象删除某个元素 js获取类名的3种方法( 五 )

add(value)：将给定的字符串值添加到列表中，如果值存在，就不添加；contains(value)：表示列表中是否存在给定的值，如果存在返回true，否则，返回false；remove(value)：从列表中删除给定的字符串；toggle(value)：如果列表中已经存在给定的值，删除它，否则，添加它；console.log(mydiv.classList);// DOMTokenListmydiv.classList.add("container");mydiv.classList.remove("container");使用classList，可以确保其他类名不受此次修改的影响，可以极大地减少类似的基本操作的复杂性；
mydiv.classList.toggle("user");// 切换user类// 确定元素中是否包含既定的类名if(mydiv.classList.contains("bd") && !mydiv.classList.contains("disabled")){// To Do }// 迭代类名for(var i=0,len=mydiv.classList.length; i<len; i++){// To Doconsole.log(mydiv.classList[i]);}有了classList属性，除非需要全部删除所有类名，或者完全重写元素的class属性，否则也就用不到className了；
需要确定的一点，classList这个DOMTokenList对象，它是实时的，如果className属性改变了，它也会及时更新，同样的，classList改变了，className属性也会及时更新；
IE9以下的浏览器不支持classList属性，可以自定义一个CSSClassList类，模拟DOMTokenList对象的方法；
function classList(e){// 以下两行先注释，否则后面的toArray默认调用的是DOMTokenList对象的的toArray，而它并不存在// 或者扩展内置的DOMTokenList的toArray// if(e.classList) return e.classList;// 如果e.classList存在，则返回它// else return new CSSClassList(e);// 否则，说伪造一个return new CSSClassList(e);}// CSSClassList是一个模拟DOMTokenList的对象function CSSClassList(e) { this.e = e;}// 如果e.className包含类名c则返回true，否则返回falseCSSClassList.prototype.contains = function(c){// 检查c是否是合法的类名if(c.length === 0 || c.indexOf(" ") != -1)throw new Error("Invalid class name: '" + c + "'");// 首先是常规检查var classes = this.e.className;if(!classes) return false;// e不含类名if(classes === c) return true; // e有一个完全匹配的类名// 否则，把c自身看做一个单词，利用正则表达式搜索creturn classes.search("\\b" + c + "\\b") != -1;};// 如果c不存在，将c添加到e.className中CSSClassList.prototype.add = function(c){if(this.contains(c)) return;// 如果存在，什么也不做var classes = this.e.className;if(classes && classes[classes.length - 1] != " ")c = " " + c;// 如果需要加一个空格this.e.className += c; // 将c添加到className中};// 将在e.className中出现的所有c都删除CSSClassList.prototype.remove = function(c){if(c.length === 0 || c.indexOf(" ") != -1)throw new Error("Invalid class name: '" + c + "'");// 将所有作为单词的c和多余的尾随空格全部删除var pattern = new RegExp("\\b" + c + "\\b\\s*", "g");this.e.className = this.e.className.replace(pattern, "");};// 如果c不存在，将c添加到e.className中，并返回true// 否则，将e.className中出现的所有c都删除,并返回falseCSSClassList.prototype.toggle = function(c){if(this.contains(c)){ // 如果e.className包含类名cthsi.remove();// 删除它return false;}else{this.add(c); // 添加return true;}};// 返回e.className本身CSSClassList.prototype.toString = function(){return this.e.className;};// 返回在e.className中的类名CSSClassList.prototype.toArray = function(){return this.e.className.match(/\b\w+\b/g) || [];};// 应用var mydiv = document.getElementById("mydiv");var ccl = classList(mydiv);console.log(ccl);console.log(ccl.contains("newsdiv"));// trueccl.add("topDiv");ccl.remove("newsdiv");ccl.toggle("newsdiv");console.log(ccl.toString());console.log(ccl.toArray());脚本化样式表：
在脚本化样式表时，会使用到两种类型的对象：
第一类是元素对象，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表，这两个元素本身是常规的文档元素，分别是由HTMLLinkElement和HTMLStyleElement类型表示，它们都可以修改元素的特性，如果它们有id，可以通过getEleementById()来获取它们；

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：