原生js添加一个或多个类名的方法分析


Posted in Javascript onJuly 30, 2019

本文实例讲述了原生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.3water.com/code/HtmlJsRun测试上述代码效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
AngularJS Module方法详解
Dec 08 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
vue2.0项目集成Cesium的实现方法
Jul 30 #Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 #Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 #Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 #Javascript
微信小程序渲染性能调优小结
Jul 30 #Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 #Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 #Javascript
You might like
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
jqGrid用法汇总(全经典)
2016/06/28 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
python赋值操作方法分享
2013/03/23 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
python em算法的实现
2020/10/03 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
记者岗位职责
2014/01/06 职场文书
应聘会计求职信
2014/06/11 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
小学班主任评语
2014/12/29 职场文书
员工自我评价范文
2015/03/11 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
Python中Selenium对Cookie的操作方法
2021/07/09 Python