原生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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JavaScript 学习技巧
Feb 17 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
js实现拖拽功能
Mar 01 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
Node.js使用Angular简单示例
May 11 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
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
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php上传文件问题汇总
2015/01/30 PHP
FCK调用方法..
2006/12/21 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
详解Python中的各种函数的使用
2015/05/24 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python的中异常处理机制
2018/08/30 Python
详解python中的index函数用法
2019/08/06 Python
python绘制彩虹图
2019/12/16 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
打架检讨书400字
2014/01/17 职场文书
模范班主任事迹材料
2014/12/17 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript