原生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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JavaScript数组去重实现方法小结
Jan 17 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 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
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
vue项目实现多语言切换的思路
2020/09/17 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
基于Django统计博客文章阅读量
2019/10/29 Python
CLR与IL分别是什么含义
2016/08/23 面试题
工作自我评价怎么写
2014/01/29 职场文书
行政专员的岗位职责
2014/03/10 职场文书
四年级评语大全
2014/04/21 职场文书
体育口号大全
2014/06/18 职场文书
个人租房协议书
2014/11/28 职场文书
入党政审材料范文
2014/12/24 职场文书
员工自我工作评价
2015/03/06 职场文书
常住证明范本
2015/06/23 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js