csslist-style属性,javascript classlist

　　前言

　　以前我们需要使用js或者jquery的一些方法，比如hasClass、addClass、removeClass，在一个元素的class属性上添加或者删除某些类，来满足某些样式变化的要求，但是还是有点麻烦。

　　H5的新classList可以让我们更容易操作元素的类名。

　　注意

　　ClassList兼容性有些差，不兼容ie10以下的ie浏览器。

　　例子

　　！DOCTYPE html html head meta charset= utf-8 title class list/title style。my style { width:300 px；高度：50px背景色：红色；颜色：白色；字体大小：25px} /style/headbodyp单击按钮为DIV元素添加“mystyle”类。/pbuttonclick= my function() click me/button DIV id= my div 我是一个div元素。/divscript函数my function(){ document . getelementbyid( my div ). class list . add( my style )；}/脚本/正文/html

　　新增类

　　使用add方法，可以向page元素添加一个或多个类：

　　document . getelementbyid( my div ). class list . add( my style )；删除一个类

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

　　document . getelementbyid( my div ). class list . remove( my style )；在元素中切换类名

　　切换元素中的类名。使用切换方法，语法：toggle(class，truefalse)

　　第一个参数是要从元素中移除的类名，并返回false。

　　如果类名不存在，类名将被添加到元素中，并返回true。

　　第二个是可选参数。设置一个布尔值用来设置一个元素是否强制添加或删除一个类，不管类名是否存在。例如：

　　移除一个

　　document . getelementbyid( myDIV ). class list . toggle( class store remove ，false)；补充一个。

　　document . getelementbyid( myDIV ). class list . toggle( class toadd ，true)；注意：Internet Explorer或Opera 12及更早版本不支持第二个参数。

　　检查是否含有某个类

　　使用contains方法确定类是否存在，并返回一个布尔值。

　　//返回true或false document . getelementbyid( my div ). class list . contains( my div )；这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。