第一种：      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. python实现归并排序，归并排序的详细分析

    python实现归并排序,归并排序的详细分析.   学习归并排序的过程是十分痛苦的.它并不常用,看起来时间复杂度好像是几种排序中最低的,比快排的时间复杂度还要低,但是它的执行速度不是最快的.很多朋友不 ...

  2. 关于使用array_rand随机取出数组的值

    代码如下 <?php echo "<meta charset='utf-8'/>";//选择解码方式,防止乱码现象 $a = array("abc&qu ...

  3. 查询表名里含有Bill的表有哪些

    Select Name from Master.dbo.sysobjects where xtype='u' and Name like '%Bill%' order by name

  4. CRC校验8

    什么是CRC校验? CRC即循环冗余校验码:是数据通信领域中最常用的一种查错校验码,其特征是信息字段和校验字段的长度可以任意选定.循环冗余检查(CRC)是一种数据传输检错功能,对数据进行多项式计算,并 ...

  5. 3.2 进程间通信之fifo

    一.引言 FIFO常被称为有名管道,不同于管道(pipe).pipe仅适用于“有血缘关系”的IPC.但FIFO还可以应用于不相关的进程的IPC.实际上,FIFO是Linux基础文件类型中的一种,是在读 ...

  6. 什么是mysql数据库安全 简单又通俗的mysql库安全简介

    首先我们要了解一下什么是mysql数据库,mysql是目前网站以及APP应用上用的较多的一个开源的关系型数据库系统,可以对数据进行保存,分段化的数据保存,也可以对其数据进行检索,查询等功能的数据库. ...

  7. go学习笔记-函数

    函数 定义 格式 func function_name( [parameter list] ) [return_types] { 函数体 } 解析 func:函数由 func 开始声明 functio ...

  8. R语言学习笔记（五）：零碎知识点(11-15)

    11--which.min(), which.max()和which() which(x, arr.ind = FALSE, useNames = TRUE) x 是一个向量或者数组,可以是NA,但会 ...

  9. NO-ZERO(空格补全)

    The NO-ZERO command follows the DATA statement REPORT Z_Test123_01. DATA: W_NUR(10) TYPE N. MOVE 50 ...

  10. Linux（CentOS）安装Node.JS

    源码安装 比使用yum安装灵活 1.创建目录 cd /opt mkdir program cd program 2.下载安装包 wget https://nodejs.org/dist/v8.12.0 ...