第一种：      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. 『ACM C++』Virtual Judge | 两道基础题 - The Architect Omar && Malek and Summer Semester

    这几天一直在宿舍跑PY模型,学校的ACM寒假集训我也没去成,来学校的时候已经18号了,突然加进去也就上一天然后排位赛了,没学什么就去打怕是要被虐成渣,今天开学前一天,看到最后有一场大的排位赛,就上去试 ...

  2. Co. - Apple - MacBook Pro 快捷键

    Mac 键盘快捷键:https://support.apple.com/zh-cn/HT201236 从windows转到mac的童鞋,可能删除键是心中的一个痛,以前习惯一按delete什么都消失,其 ...

  3. Python——判断

    if语句简介 说明 使用if语句判断的条件表达式的结果只有两种:Ture和False,结果为True则执行if语句中的代码,否则不执行,例: name = "smith" if n ...

  4. php post提交xml文件

    <?php header("Content-type: text/xml;"); // xml code demo $xmlData = '<?xml version= ...

  5. hadoop2.7.2集群搭建

    hadoop2.7.2集群搭建 1.修改hadoop中的配置文件 进入/usr/local/src/hadoop-2.7.2/etc/hadoop目录,修改hadoop-env.sh,core-sit ...

  6. OMAPL138制作SD卡启动介质及重装Linux系统

    OMAPL138制作SD卡启动盘及重装Linux系统 手里的创龙的OMAPL138平台的系统SSH坏掉了,我重新移植了openssh还是不好使,没有办法了只能重装OMAPL138的系统了,按照创龙给的 ...

  7. Python3爬虫（九） 数据存储之关系型数据库MySQL

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 关系型数据库关系型数据库是基于关系模型的数据库,而关系模型是通过二维表来保存的,所以关系型数据库的存储方式就是行列 ...

  8. 販売管理(SD)

    SD(販売管理)系のSAP DBテーブル. 随時更新していきます. [得意先マスタ]KNA1: 一般データ KNB1: 会計データ KNBK: 銀行データ KNVV: 販売データ KNVP: 取引先機 ...

  9. Sql Server 表间对应关系

    <1>.关联映射:一对多/多对一 存在最普遍的映射关系,简单来讲就如球员与球队的关系:一对多:从球队角度来说一个球队拥有多个球员 即为一对多多对一:从球员角度来说多个球员属于一个球队 即为 ...

  10. 浅析express以及express中间件

    一.express: 1.express: Express是什么? Express是基于node.js平台的web应用开发框架: 作用:可以实现快速搭建骨架: 优点:开发web应用更加方便,更加快捷. ...