原生js添加一个或多个类名的方法分析
更新时间：2019年07月30日 11:16:06 作者：_信仰zmh
这篇文章主要介绍了原生js添加一个或多个类名的方法,结合实例形式分析了javascript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了原生js添加一个或多个类名的方法。分享给大家供大家参考，具体如下：
好吧今天写个js，不知道怎么添加类名了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
#box {
width: 200px;
height: 200px;
margin: 0 auto;
background: pink;
border-radius: 20px;
}
@keyframes move{
0%{width: 500px; background-color: red;}
10%{width: 100px; background-color: green;},
20%{width: 900px; background-color: yellow;},
50%{width: 300px; background-color: pink;},
80%{width: 550px; background-color: gold;},
100%{width: 200px; background-color: purple;}
}
.movea {
animation: move 1s ;
}
</style>
</head>
<body>
<div id='box'>
</div>
<script type="text/javascript">
document.getElementById('box').onclick = function() {
this.setAttribute("class", "movea");
this.classList.add("movea");
}
</script>
</body>
</html>
二 .使用原生JS给元素--添加/删除类名
var dom = document.getElementById("idName");
添加 单个 class:
dom.classList.add("className1");
添加多个类:
dom.classList.add("className1", "className2", "className3", ....., "classNameN");
移除一个类:
dom.classList.remove("className1");
移除多个类:
dom.classList.remove("className1", "className2", "className3", ....., "classNameN");
检查是否含有某个类
dom.classList.contains('className'); //return true or false
当然还有很多其他的方法，上面的也不全
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
class是创建对象的模版，由一系列属性和方法构成，用于表示对同一概念的数据和操作。有的属性和方法是对外的，但也有的是私有的。本文梳理了六种私有属性的实现方式，需要的可以参考一下2022-03-03
这篇文章主要介绍了一些常用javascript表单验证，文章最后还附带了一个实践案例，以验证数字为例进行讲解，感兴趣的小伙伴们可以参考一下2015-11-11
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
这篇文章主要介绍了微信小程序多行文本显示...+显示更多按钮和收起更多按钮,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要介绍了js脚本中执行java后台代码方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了JavaScript实现把数字转换成中文,本文直接给出实例代码,需要的朋友可以参考下2015-06-06
Javascript HTML5 Canvas实现的一个画板
这篇文章主要为大家详细介绍了Javascript HTML5 Canvas实现的一个画板的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
最新发布的CKFinder 1.4版 已经提供了对CKEditor3.0的支持2010-01-01
本篇文章主要介绍了ionic 3.0+ 项目搭建运行的教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
近期在做项目的时候,遇到了一些JS浮点数精度的问题,这个问题其实说大不大,说小不小,下面这篇文章主要给大家介绍了关于js运算精度丢失的2个解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了iscroll实现下拉刷新功能的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论