<!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. Amazon AWS EC2存储

  2. YXcms前台注入（有限制但可以绕过）

    这个cms很久前做过代码审计,很多问题,但是经过这么长时间,现在安全性提高了不少,这几天看了下,基本没有什么特别大的问题了(不包含后台). 在yxcms/protected/apps/member/c ...

  3. 踩坑记-java mysql 新增获取主键、DIY主键、UUID

    java mysql 获取主键.DIY主键.UUID,简单粗暴,代码如下: mapper.xml insert id="add" parameterType="com.x ...

  4. 如何在Vue项目中使用Element组件

    [前提] 1.安装webpack    cnpm install webpack -g 2.安装vue/vue-cli    cnpm install vue vue-cli -g 3.初始化vue  ...

  5. uoj279 题目交流通道

    题目:告诉你每两个点之间的最短路距离.构造每条边边权<=m的无向完全图.求有多少种不同边权的图满足最短路限制?n<=400. 标程: #include<cstdio> #inc ...

  6. Ubuntu Service说明与使用方法

    1 什么是Ubuntu的Service 网上很多资料说, service就是linux中随开机自启动的, 并且在后台运行的程序. 个人认为, 至少对于Ubuntu来说, 这个说法是不太准确的, 这只不 ...

  7. 廖雪峰Java15JDBC编程-2SQL入门-2insert/select/update/delete

    1. INSERT用于向数据库的表中插入1条记录 insert into 表名 (字段1,字段2,...) values (数据1,数据2,数据3...) 示例 -- 如果表存在,就删除 drop t ...

  8. JWT生成token

    1.JWT简介 JSON Web Token 简称JWT.一个JWT实际上就是一个字符串,它由三部分组成,头部.载荷与签名.JWT生成的token是这样的 2.Json Web Token(JWT)生 ...

  9. 19-11-14-Finally

    如果这是世界末日的前一晚, 这是我的回答. #include <bits/stdc++.h> using namespace std; int main(){ cout<<&q ...

  10. 清空标签间的内容（innerHTML）和 value

    jquery 方式: 清空标签的innerHTML: $("#divId").html(""); 清空标签的value: $("#divId" ...