<!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. Caffe系列1——网络文件和求解分析

    1. 首先,我们先看一个完整的文件:lenet_train_test.prototxt name: "LeNet" #整个网络的名称 layer { #数据层——训练数据 name ...

  2. java 上传MultipartFile和String post请求

    /** * POST Multipart Request * @Description: * @param requestUrl 请求url * @param requestText 请求参数 * @ ...

  3. AM历史消息及文件记录删除

    1.下载 folderclear.bat 文件 2.用编辑方式打开这个文件 3.对里面的参数做修改 4.这个批处理文件,保留了 完整的一个月的消息记录 (如 今天是 2017.3.15 ,那么 清除数 ...

  4. Idea安装Mevn

    1.下载mevn安装包. 下载地址:http://maven.apache.org/ 点击Download 2.下面这两个选哪个都可以,取决于你用什么方式解压 3.把下载好的安装包解压到一个没有中文的 ...

  5. EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片

    1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...

  6. centos7的变化（转）

    centos7的变化 找了一个下午都不知道为什么找不到一些命令,终于在一个地方看到了. 地址:http://www.sa-log.com/276.html 王, 帅 2015年09月24日 于 运维日 ...

  7. mysql列属性操作（转载）

    1.mysql中修改字段长度: ALTER TABLE tb_article MODIFY COLUMN NAME VARCHAR(50); 这里的tb_article为表名,NAME为字段名,50为 ...

  8. 线段树分治初步学习&洛谷P5227[AHOI2013]连通图

    线段树分治 其实思想说起来是比较简单的,我们把这个题里的所有操作(比如连边删边查询balabala)全部拍到一棵线段树上,然后对着整棵树dfs一下求解答案,顺便把操作做一下,回溯的时候撤销一下即可.虽 ...

  9. 大数据、AI“武装”企业服务：风控、检索、安全

    大数据.AI“武装”企业服务:风控.检索.安全 小饭桌创业课堂2017-05-06 15:26:42阅读(127)评论(0) + - 文|吴杨可月 - - 小饭桌创业研究院出品 - 两件秘闻,将美国大 ...

  10. iOS之CGcontext.h方法和属性简介

    /* CoreGraphics - CGContext.h Copyright (c) 2000-2012 Apple Inc. All rights reserved. */ #ifndef CGC ...