如何使用HTML5的classList属性操作CSS类

这篇“如何使用HTML5的classList属性操作CSS类”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“如何使用HTML5的classList属性操作CSS类”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。

成都创新互联公司专注于纳溪企业网站建设,响应式网站建设,商城网站开发。纳溪网站建设公司,为纳溪等地区提供建站服务。全流程按需网站建设,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

html有什么特点

1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。  3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

注意

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

示例




    
    classList
    



点击按钮为DIV元素添加 "mystyle" 类。

点我     我是一个 DIV 元素。

如何使用HTML5的classList属性操作CSS类

新增类

使用add方法,你可以往页面元素是新增一个或多个类:

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

删除一个类

使用remove方法,你可以删除单个CSS类:

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

在元素中切换类名

在元素中切换类名。使用toggle方法,语法:toggle(class, true|false)

第一个参数为要在元素中移除的类名,并返回 false。

如果该类名不存在则会在元素中添加类名,并返回 true。

第二个是可选参数,设置布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。例如:

移除一个

document.getElementById("myDIV").classList.toggle("classToRemove", false);

添加一个

 document.getElementById("myDIV").classList.toggle("classToAdd", true);

注意: Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数

检查是否含有某个类

使用contains方法,判断某个类是否存在,返回布尔值。

 //returns true or false
 document.getElementById("myDIV").classList.contains("myDIV");

以上是“如何使用HTML5的classList属性操作CSS类”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站标题:如何使用HTML5的classList属性操作CSS类
URL标题:http://cdiso.cn/article/ggsjsp.html

其他资讯