1、el.setAttribute('class','abc');

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>setAttribute('class', 'abc')</title>
<style type="text/css">
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id="d1">test div</div>
<script>
var div = document.getElementById('d1');
div.setAttribute("class", "abc");
</script>
</BODY>
</HTML>
2、el.setAttribute('className', 'abc')
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>setAttribute('className', 'abc')</title>
<style type="text/css">
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id="d1">test div</div>
<script>
var div = document.getElementById('d1');
div.setAttribute("className", "abc");
</script>
</BODY>
</HTML>
3、el.className = 'abc';
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>el.className = 'abc'</title>
<style type="text/css">
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id="d1">test div</div>
<script>
var div = document.getElementById('d1');
div.className = 'abc';
</script>
</BODY>
</HTML>

纯js添加类的更多相关文章

  1. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  2. 纯js遍历json获取值动态为select添加option

    遍历json数组 并动态为select添加option 直接上代码,重要部分有注解 <!DOCTYPE html> <html lang="en"> < ...

  3. JS实现 类的 1.判断 2.添加 3.删除 4切换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. js dom 添加类

    var sheng = document.getElementById("sheng"); ; sheng.onclick = function() { if(this.paren ...

  5. Rhino+envjs-1.2.js 在java运行网站js 工具类

    java爬虫遇到个页面加密的东西,找了些资料学习学习 做了个java运行js的工具类,希望对大家有用,其中用到client(获取js)可以自行换成自己的client.主要是用了 Rhino就是Java ...

  6. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  7. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  8. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  9. 纯js客服插件集qq、旺旺、skype、百度hi、msn

    原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...

随机推荐

  1. LeetCode220 存在重复元素 III

    给定一个整数数组,判断数组中是否有两个不同的索引 i 和 j,使得 nums [i] 和 nums [j] 的差的绝对值最大为 t,并且 i 和 j 之间的差的绝对值最大为 ķ. 示例 1: 输入: ...

  2. Invalid bound statement (not found): com.xxx.xxx.dao.ShopMapper.insertShop

    mybatis在编写完SQL,进行测试的时候出现了错误,显示 org.apache.ibatis.binding.BindingException: Invalid bound statement ( ...

  3. 区间合并 C++

    #include <iostream> #include <vector> #include <algorithm> using namespace std; ty ...

  4. 【MySQL】使用WHERE子句 - 过滤数据

    第6章 过滤数据 文章目录 第6章 过滤数据 1.使用WHERE子句 2.WHERE子句操作符 2.1.检查单个值 2.2.不匹配检查 2.3.范围值检查 2.4.空值检查 3.小结 简单记录 - M ...

  5. MyBatis初级实战之三：springboot集成druid

    OpenWrite版: 欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kuber ...

  6. Java中的NIO进阶

    目录 前言 NIO与多线程 Readable和Writeable的空触发 请求与返回的处理 事件的处理机制 NIO多线程使用的一个例子 前言 之前一篇文章简单介绍了NIO,并附了一个简单的例子,但是自 ...

  7. oralce move和shrink释放高水位

    转自:https://blog.51cto.com/fengfeng688/1955137 move和shrink的共同点: 收缩段,消除部分行迁移,消除空间碎片,使数据更紧密 shrink用法: 语 ...

  8. [Usaco2008 Mar]Cow Travelling游荡的奶牛

    题目描述 奶牛们在被划分成N行M列(2 <= N <= 100; 2 <= M <= 100)的草地上游走,试图找到整块草地中最美味的牧草.Farmer John在某个时刻看见 ...

  9. [Ceoi2004]Journey

    题目描述 给出N个点,及你的出发点K. 接下来N-1行描述有关边的开始点,结束点,边长.保证图中不会有环 接下来给出数字J,代表你要走多少个点. 接下来J个数字,代表你要走过的点的编号.当然你可以自己 ...

  10. Gradle使用及配置

    构建工具:Gradle(6.8) 下载地址:https://gradle.org/releases/ 下载最新版的二进制文件即可,下载"gradle-6.8.1-bin.zip文件,下载后完 ...