<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{width: 200px;height: 200px;background: yellowgreen}

        .page{color: red}

        .btn{font-size: 20px;}

    </style>

</head>

<body>

<div class="box">这是测试</div>

<script>

var box=document.getElementsByClassName("box")[0];

        box.className=box.className+" "+"page";//增加类名

        box.classList.add("btn");//增加类名

        box.classList.remove("btn");//移除类名

        box.classList.item(1);//根据索引找类名

        console.log(box.className);

        console.log(box.classList.item(1))

</script>

</body>

</html>

原生js增加，移除类名的更多相关文章

  1. jquery与原生JS实现增加、减小字号功能

    预览效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 通过案例来剖析JQuery与原生JS

    首先来个例子: 我们在登陆或者注册一些网站时,如果某一项点过了但没填,鼠标移走后是不是经常看到网站有相应的红色字体提示呢? 那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别,来上代码: ...

  3. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  4. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  5. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

  6. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  7. 原生js封装dom操作库

    var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...

  8. 用原生JS实现一个轮播（包含全部代码和详细思路）

    在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...

  9. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

随机推荐

  1. LINUX常用操作命令和命令行编辑快捷键

    终端快捷键: Ctrl + a/Home 切换到命令行开始 Ctrl + e/End 切换到命令行末尾 Ctrl + l 清除屏幕内容,效果等同于clear Ctrl + u 清除剪切光标之前的内容 ...

  2. string json list

    String str="[{\"cIndex\":14,\"column\":\"nextAdvice\",\"id\& ...

  3. 小米手机 DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs

    手机:小米2s,MIUI 9 7.11.16 开发版 手机已处于开发者模式,启用了USB调试,已使用USB线连接了手机,在Android Studio 工具栏点击 "Run ‘app’(Sh ...

  4. 关于JAVA项目中CLASSPATH路径详解

    写的不错:http://blog.csdn.net/cheney521/article/details/8672066 以下内容源于复制,把自己觉得不错的东西收集起来: 在dos下编译java程序,就 ...

  5. fetchSql是3.2.3新增的连贯操作方法，用于直接返回SQL而不是执行查询。

    fetchSql是3.2.3新增的连贯操作方法,用于直接返回SQL而不是执行查询. 例如: $result = M('User')->fetchSql(true)->find(1); 输出 ...

  6. LUOGU P1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火)

    传送门 解题思路 学习了一下玄学算法--模拟退火,首先要求平衡处,也就是求势能最小的地方,就是求这个点到所有点的距离*重量最小.剩下的几乎是模拟退火的板子了. #include<iostream ...

  7. nc 文件的nan识别

    表现形式:print()结果为 --      打印type为numpy.ma.core.MaskedConstant 使用 if type(x) == np.ma.core.MaskedConsta ...

  8. 深入浅出 Java Concurrency (39): 并发总结 part 3 常见的并发陷阱

    常见的并发陷阱 volatile volatile只能强调数据的可见性,并不能保证原子操作和线程安全,因此volatile不是万能的.参考指令重排序 volatile最常见于下面两种场景. a. 循环 ...

  9. 通过实体类生成建表SQL语句实现方法

    import java.io.File; import java.io.FileOutputStream; import java.lang.reflect.Field; import java.ut ...

  10. 在scrapy中将数据保存到mongodb中

    利用item pipeline可以实现将数据存入数据库的操作,可以创建一个关于数据库的item pipeline 需要在类属性中定义两个常量 DB_URL:数据库的URL地址 DB_NAME:数据库的 ...