HTMLDOMclassList属性

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTMLDOMclassList属性，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2434字，纯文字阅读大概需要4分钟。

内容图文

添加类（add）

document.getElementById("myp").classList.add("mystyle");

为 <p> 元素添加多个类:

document.getElementById("myp").classList.add("mystyle", "anotherClass", "thirdClass");

移除类(remove)

使用remove方法，你可以删除单个CSS类：

document.getElementById("myp").classList.remove("mystyle");

移除多个类：

document.getElementById("myp").classList.remove("mystyle", "anotherClass", "thirdClass");

切换类(toggle)

这个方法的作用就是，当myp元素上没有这个CSS类时，它就新增这个CSS类；如果myp元素已经有了这个CSS类，它就是删除它。就是反转操作。

document.getElementById("myp").classList.toggle("newClassName");

myp.classList.toggle('myCssClass'); //现在是增加
myp.classList.toggle('myCssClass'); //现在是删除

是否存在类（contains）

检查是否含有某个CSS类:

var x = document.getElementById("myp").classList.contains("mystyle");

结果是true或者false。

length属性

返回类列表中类的数量。
查看 <p> 元素有多少个类名:

var x = document.getElementById("myp").classList.length; //3

获取获取 <p> 元素的所有类名:

<p id="myp" class="mystyle anotherClass thirdClass">I am a p element</p>

var x = document.getElementById("myp").classList;

item(index)

返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
获取 <p> 元素的第一个类名（索引为0）:

var x = document.getElementById("myp").classList.item(0); //mystyle

浏览器支持

但是IE9和IE9以前的版本不支持该属性，下面这个代码可以弥补这个遗憾：（来自网友代码）

if (!("classList" in document.documentElement)) {  
        Object.defineProperty(HTMLElement.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;  
                    }  
                };  
            }  
        });  
    }

更多HTML DOM classList 属性相关文章请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的HTMLDOMclassList属性全部内容，希望文章能够帮你解决HTMLDOMclassList属性所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端