<!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. iOS开发系列-NSOutputStream

    NSOutputStream 创建一个NSOutputStream实例 - (nullable instancetype)initToFileAtPath:(NSString *)path appen ...

  2. SQL中的左连接与右连接,内连接有什么不同

    SQL中的左连接与右连接,内连接有什么不同 我们来举个例子.天庭上面有一个管理系统:管理系统有个主表:主表记录着各个神仙的基本信息(我们把它当成表A).还有个表记录着他们这个神仙的详细信息(我们把它当 ...

  3. 2019-11-12-浅谈-Windows-桌面端触摸架构演进

    title author date CreateTime categories 浅谈 Windows 桌面端触摸架构演进 lindexi 2019-11-12 14:37:31 +0800 2019- ...

  4. leetcode-03-二叉树的锯齿层次遍历

    题目描述: 方法一: # Definition for a binary tree node. # class TreeNode: # def __init__(self, x): # self.va ...

  5. Excel skill: 如何替换换行符，以及如何把一格转换成多行/多列

    http://blog.sciencenet.cn/blog-508298-695290.html 增加一辅助列,用替换函数替换掉软回车.比如A列是数据,从A1开始,则插入B列,B1输入公式=REPL ...

  6. 常见的HTTP状态码详细解析

    http状态码分为五类 : 1XX 信息 服务器收到请求,需要请求者继续操作 2XX 成功 请求被成功接手并返回给请求者 3XX 重定向 需要进一步操作才能完成请求 4XX 客户端错误 请求包含语法错 ...

  7. CF #575 Div3

    // 比赛链接:https://codeforces.com/contest/1196 // CF 2019.7.24 // 本想Div3手速场上分,结果卡在C题,掉了不少分. // 自闭了这么久,今 ...

  8. 15_K-近邻算法之入住位置预测

    案例:本次大赛的目的是预测一个人想签入到哪个地方.对于本次比赛的目的,Facebook的创建一 个人造的世界,包括位于10公里的10平方公里超过10万米的地方.对于一个给定的坐标,你的任务是返回最有可 ...

  9. https证书加密

    对称加密 浏览器向服务端发送请求时,服务端首先给浏览器发送一个秘钥,浏览器用秘钥对传输的数据进行加密后发送给浏览器,浏览器拿到加密后的数据使用秘钥进行解密 非对称加密 服务端通过rsa算法生成一个公钥 ...

  10. Hyper-V 2016 上安装windows7激活重启后黑屏无法进入系统

    激活重启后就出现下图,无法进入系统 出现此种情况是由于win7的开机引导损坏导致的,具体解决办法如下: 1.设置光盘启动 2.关闭系统重新启动进行修复 启动后按住shift+f10进行修复 输入以下命 ...