<!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. [转]Java多线程

    一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: 上图中基本上囊括了Java中多线程各重要知识点.掌握了上图中的各知识点,Java中的多线程也就基本上掌 ...

  2. 非旋Treap及其可持久化

    平衡树这种东西,我只会splay.splay比较好理解,并且好打,操作方便. 我以前学过SBT,但并不是很理解,所以就忘了怎么打了. 许多用平衡树的问题其实可以用线段树来解决,我们真正打平衡树的时候一 ...

  3. String相加解析

    Java代码 package com.utils.test; public class TestObject { public static void main(String[] args) { St ...

  4. SEO-----网站不被收录的原因

    1.  新站的收录较慢 2. 文章质量不高 文章难以阅读  排版乱 内容是别的网站采集来的  很难被收录 3. 网站被降权中 4. 蜘蛛不访问[网站配置] 检查网站是否屏蔽了蜘蛛的爬取[ robots ...

  5. C++数组或vector求最大值最小值

    可以用max_element()及min_element()函数,二者返回的都是迭代器或指针. 头文件:#include<algorithm> 1.求数组的最大值或最小值 1)vector ...

  6. 04.如何升级扩展以支持Visual Studio 2019

    更新.vsixmanifest 我们需要对.vsixmanifest文件进行一些更新.首先,我们必须更新支持的VS版本范围 <InstallationTarget> 这是一个版本,支持Vi ...

  7. Linux 静态IP配置

    静态配置文件# vim /etc/sysconfig/network-scripts/ifcfg-不同系统不一样主要几个配置TYPE=EthernetBOOTPROTO=static/noneNAME ...

  8. Ubuntu 16.04 安装STS

    先将STS下载下来,网址是 https://spring.io/tools/sts/all ,然后将STS压缩包移动或者copy到想要放置的位置,比如, sudo cp spring-tool-sui ...

  9. 微信小程序上传报错：以下文件没有被打包上传: · .gitignore

    简单粗暴的办法就是:找到gitignore文件,把该文件删除掉即可. 在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这 ...

  10. sql server 获取指定格式的当前日期

    使用sqlserver日期函数中的getdate()可以获取当现的日期,下面就将为您介绍这种使用sqlserver日期函数获取当前日期的方法. 但是如果我们只需要得到当前的日期,不需要时间部分,或者不 ...