第一种：      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="div">test div</div>

    <script>

    var div = document.getElementById('div');

    div.setAttribute("class", "abc");

    </script>

    </BODY>

    </HTML>

第二种： 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="div">test div</div>

    <script>

    var div = document.getElementById('div');

    div.setAttribute("className", "abc");

    </script>

    </BODY>

    </HTML>

第三种：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="div">test div</div>

    <script>

    var div = document.getElementById('div');

    div.className = 'abc';

    </script>

    </BODY>

    </HTML>

建议使用第三种方法， 其他方法可能存在浏览器兼容问题。

原文：https://blog.csdn.net/yan791124465/article/details/71123664

js 给某个div增加class 样式（三种方式）的更多相关文章

  1. js异步执行 按需加载 三种方式

    js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...

  2. 为ScrollView增加圆角的三种方式，及自定义属性【在Linearlayout中新增ScrollView支持滚动 后续】

    获取圆角的几种方案如下:方案一:通过shape来实现,给scrollView增加背景来实现方案二:通过自定义ScrollView,还要自定义属性,在dispatchDraw中不停的裁剪方案三:用And ...

  3. js将字符串转换成json的三种方式

    1,js自带的eval函数,其中需要添加小括号eval('('+str+')'); function strToJson(str){ var json = eval('(' + str + ')'); ...

  4. js中将字符串转换成json的三种方式

    1,eval方式解析,恐怕这是最早的解析方式了.如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; ...

  5. JS判断图片是否加载完成三种方式

    1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...

  6. JS创建对象，数组，函数的三种方式

    害怕自己忘记,简单总结一下 创建对象的3种方法 ①:创建一个空对象   var obj = {}; ②:对象字面量 var obj = { name: "Tom", age: 27 ...

  7. css文件引人的三种方式

    前言 1995年,W3C发布了CSS草案 1996年,W3C正式推出CSS1 1998年,推出CSS2 2001年从CSS3开始,CSS这门语言分割成多个独立的模块,每个模块独立分级,且只包含一小部分 ...

  8. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. CSS样式三种形式222

    markdown CSS基本表现形式只有三种:标签样式.Class类样式.ID样式 标签样式: 必须与HTML标签同名.仅仅影响同名标签 Class样式:可以在任何标签中使用: class=" ...

随机推荐

  1. 第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛--D-psd面试

    链接:https://www.nowcoder.com/acm/contest/90/D 来源:牛客网 1.题目描述 掌握未来命运的女神 psd 师兄在拿了朝田诗乃的 buff 后决定去实习. 埃森哲 ...

  2. windows平台下获取网卡MAC地址、硬盘序列号、主板序列号、CPU ID、BIOS序列号

    转自http://blog.csdn.net/jhqin/article/details/5548656,如有侵权,请联系本人删除,谢谢!! 头文件:WMI_DeviceQuery.h /* ---- ...

  3. ABAP术语-Data Transfer

    Data Transfer 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/22/1048286.html The entire proces ...

  4. JS高级. 04 增删改查面向对象版歌曲管理、递归、

    增 数组.push() 删 数组.splice(开始删除索引,删除几个) 在当前对象中调用当前对象的方法中和属性,必须用this调用 nodeType判断节点类型 节点.nodeType ==  1: ...

  5. [转]JavaScript中的匿名函数及函数的闭包

    JavaScript中的匿名函数及函数的闭包  原文地址:http://www.cnblogs.com/wl0000-03/p/6050108.html 1.匿名函数 函数是JavaScript中最灵 ...

  6. PHP-入门指引1

    PHP("PHP: Hypertext Preprocessor",超文本预处理器的字母缩写)是一种被广泛应用的开放源代码的多用途脚本语言,它可嵌入到 HTML中,尤其适合 web ...

  7. Hive初识（四）

    Hive本质上是一个数据仓库,但不存储数据(只存储元数据(metadata),Hive中的元数据包括表的名字,表的列和分区及分区及其属性,表的属性(是否为外部表等),表的数据所在目录等),用户可以借助 ...

  8. 开通CSDN博客的原因

                                                                          为什么要写博客? 提供持续学习的动力 例如,我为自己设限每天 ...

  9. STL——泛型编程

    1.指针的算术运算 对于一个存储int数据的vector,我们要查找某值是否存在于其中,采用下标操作的做法如下: int* find(const vector<int> &vec, ...

  10. Hyperledger Fabric国密改造

    Fabric国密改造是个什么概念?我们来思考以下4个问题: 为什么偏偏是密码算法?(WHY?) 什么是国密算法?(WHAT?) 改造切入点什么?(WHERE?) 如何实现国密支持?(HOW?) 1.为 ...