下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。
常我们在操作类名时，需要通过 className 属性来添加，删除和替换类名。因为 className 中是一个字符串，所以即使我们只是修改字符串的一部分，也要每一次都重新设置整个字符串的值。如果一个元素有多个类名，要如何删除呢，jqeury 提供了 removeClass()这个 api，如果不用插件，自己封装，例如有下面的代码：
<div class="name1 name2 name3"></div>
这个
元素中共有三个类名。如果要删除第一个类名 name1，需要把这三个类名拆开，删除不需要的类名，然后在将余下的类名组合后重新放回去，代码如下：
function removeClass(elm,removeClassName) {
//首先渠道类名字符串并拆分成数组
var classNames = elm.className.split(/s+/);
var pos = -1,i,len;
//找到要删的类名
for (i = 0,len = classNames.length; i < len; i++){
if(classNames[i] == "name1") {
pos = i;
break;
}
}
if(pos == -1){
throw Error("没有这个类名");
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼成字符串重新设置
elm.className = classNames.join(" ");
}
在传统的 javascript 中，要完成类名的删除，上面的代码步骤是必须的。在 HTML5 中新增了一个操作类名的方式，可以让操作更加简单安全，这个方式就是为所有的元素添加 classList 属性。这个 classList 属性是新集合类型 DOMTokenList 的实例。与其它 DOM 集合类似，DOMTokenList 有一个表示自己包含多少个元素的 length 属性。要取得每一个元素可以使用 item()方法，也可以使用方括号语法。另外，这个新类型还定义了下面的一些特殊方法：
add(value)：将指定的字符串值添加到列表中。如果值已经存在则不会添加
contains(value)：指定列表中是否存在已给定的值。存在则返回 true，否则返回 false
remove(value)：从列表中删除指定的字符串
toggle(value)：如果列表中已经存在指定的值则删除它，否则将指定的值添加到列表中
当然 html5 新增了操作类名的方式 classList 他有 5 个属性，如果使用 classList，前面例子使用一句代码就可以完成了。
div.classList.remove("name1");
其它的方法也能够大大的减少类似传统 js 操作的复杂性，例如：
//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("user");
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
//执行操作
)
//迭代类名
for (var i=0,len=div.classList.length; i < len; i++){
doSomething(div.classList[i]);
}
但是支持浏览器比较少（classList 兼容性有些差，不兼容 ie10 以下的 ie 浏览器）， ie10+,Firefox 3.6+和 Chrome。
赞(0)
赏
本文由 创客云 作者：PetitQ 发表，转载请注明来源！
也想出现在这里？联系我们吧
PetitQ
文章：16986 画廊：128 视频：17 商品：282
本站承接 wordpress/Dedecms/ThinkPHP 等系统建站、仿站、开发、定制等服务！
相关文章
苹果手机将网站添加到主屏幕上的方法
HTML/CSS
2018年11月8日
利用:hover伪类实现鼠标指向区块滑出小提示效果
HTML/CSS
2019年3月12日
代码实现给网站添加返回顶部功能
HTML/CSS
2019年12月28日
热评文章
2CSS元素隐藏后JS事件响应
3CSS 禁用文本选择高亮（::selection）
4使用CSS3实现酷炫的3D旋转透视
5通过 CSS自定义属性（CSS变量）和 JavaScript 实现高级CSS主题切换
最受欢迎
2CSS实现隐藏滚动条并可以滚动内容
3网页HTML特殊字符编码对照表
4HTML5中Canvas绘图各种基本图形的方法
5CSS3 文字边框 -webkit-text-stroke 镂空的字体
发表评论 取消回复
要发表评论，您必须先登录。也想出现在这里？联系我们吧热门文章
Nexio - 时尚服饰商店网站WooCommerce模板
wordpress汉化2019年10月17日30NEXIO 是一个高端设计适用于任何设备，特别是移动设备的wordpress在线商店主题。主题遵守移动第…
Mac - 全屏摄影艺术wordpress汉化主题
wordpress汉化2019年4月16日29Mac - 炫酷全屏摄影艺术wordpress深度汉化主题，该主题适合那些从事摄影，绘画或数字图形艺术家…
Novo - 摄影作品展示网站模板wordpress主题
wordpress汉化2018年5月13日15我们为您呈现一个令人敬畏的摄影wordpress主题，有了它，您可以为摄影师，博客，摄影机构或摄影工…
Ave - 多用途网站模板wordpress汉化主题
wordpress汉化2018年12月29日13Ave - 响应式多用途wordpress主题，唯一的主题涵盖所有方面; 美观的布局，超级可定制，超快速…
Cevian - 高端创意企业集团wordpress汉化主题
wordpress汉化2019年9月6日12使用Cevian建立您的咨询或金融业务，这是一个精致的多用途商业主题，适合您的新公司网站，包含咨询，金融…也想出现在这里？联系我们吧
精彩推荐
Tabula - 艺术音乐外语培训学校网站wordpress模板@H_404_237@
觉得文章有用请给作者打赏！
觉得文章有用请给作者打赏！
酷站
视频
商品
我的购物车@H_404_237@
购物车里没有产品
用户名/邮箱/手机
密码
注册 ｜
忘记密码
嘿，欢迎咨询！
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
