应用HTML5里的classList实际操作CSS类

日期:2021-02-24 类型:科技新闻 

关键词:微擎小程序开发,微信小程序下载,如何在微信上做小程序,调查问卷微信小程序,微信抽签小程序

在JavaScript和JavaScript专用工具库里征战多年,我常常有这样的遐思:何时当代访问器里能出示1些輔助方式和类库,取代那些JavaScript专用工具库,例如jQuery,让大家用访问器原生态的方式取代它们。我了解访问器必然会向这个方位改善,但这个演变全过程不容易很快速,并且各种各样访问器必须相互做这样的创新,火狐访问器、谷歌访问器、非常是IE,仅有当这些流行访问器都具有了这样的作用,大家的心愿才算真实的完成。好信息是,在其中有1个这样的作用早已被添加到了HTML5 API里:classList

在HTML5 API里,网页页面DOM里的每一个连接点上都有1个classList目标,程序流程员可使用里边的方式新增、删掉、改动连接点上的CSS类。应用classList,程序流程员还能够用它来分辨某个连接点是不是被授予了某个CSS类。

Element.classList

这个classList目标里有许多有效的方式:

XML/HTML Code拷贝內容到剪贴板
  1. {   
  2.  length: {number}, /* # of class on this element */   
  3.  add: function() { [native code] },   
  4.  contains: function() { [native code] },   
  5.  item: function() { [native code] }, /* by index */   
  6.  remove: function() { [native code] },   
  7.  toggle: function() { [native code] }   
  8. }   
  9.   

正如你上面看到的,Element.classList类很小,但里边的每一个方式都很有效。

新增CSS类

应用add方式,你能够往网页页面元素是新增1个或好几个css类:

myDiv.classList.add('myCssClass');

删掉1个CSS类

应用remove方式,你能够删掉单独CSS类:

myDiv.classList.remove('myCssClass');

你能够在这个方式里1次传入好几个类名,用空格分开,但实行的結果很有将会并不是你预期的。

翻转CSS类的有没有

myDiv.classList.toggle('myCssClass'); //如今是提升
myDiv.classList.toggle('myCssClass'); //如今是删掉

这个方式的功效便是,当myDiv元素上沒有这个CSS类时,它就新增这个CSS类;假如myDiv元素早已有了这个CSS类,它便是删掉它。便是翻转实际操作。

查验是不是含有某个CSS类

myDiv.classList.contains('myCssClass'); //returns true or false

现阶段全部的当代访问器(火狐访问器,谷歌访问器等)都适用这个classList类,因此,坚信新式的javaScript类库里都会应用classList类来实际操作网页页面CSS类,而不需像之前1样去剖析元素连接点的class特性!

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:手机上端用rem+scss做兼容的详解 返回下一篇:没有了