第一种：      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. Co. - Apple - Apple ID

    有些应用或游戏,在国内 App Store 没上架或者被下架了,但是其他国家或地区(如美国.香港和台湾等)的 App Store 却提供下载,这时我们需要登陆一个相应地区的 Apple ID 才可以下 ...

  2. django模型的字段查询

    条件运算符 exact: 查判等 list=BookInfo.objects.filter(id__exact=1) 可简写为: list=BookInfo.objects.filter(id=1) ...

  3. 11 非阻塞套接字与IO多路复用（进阶）

    1.非阻塞套接字 第一部分 基本IO模型 1.普通套接字实现的服务端的缺陷 一次只能服务一个客户端! 2.普通套接字实现的服务端的瓶颈!!! accept阻塞! 在没有新的套接字来之前,不能处理已经建 ...

  4. 网络基础,tpc,udp

    一 , 网络基础相关知识 1. 架构 (重点) C / S  架构 : client 客户端(APP) 和 server 服务器端 能充分发挥pc机的性能 B / S 架构 : browser 浏览器 ...

  5. 第一个网页（仿照当当网,仅仅使用CSS）

    这个网页是在学过CSS之后,对当当网首页进行模仿的网页,没有看当当网的网页源码,纯按照自己之前学的写的,由于是刚学过HTML和CSS才一个星期,所以里面有许多地方写的非常没有水平,仅仅用来学习使用,欢 ...

  6. ctf题目writeup（7）

    2019.2.10 过年休息归来,继续做题. bugku的web题,地址:https://ctf.bugku.com/challenges 1. http://123.206.87.240:8002/ ...

  7. linux文件操作篇 (四) 目录操作

    #include <sys/stat.h>#include <unistd.h>#include <dirent.h> //创建文件夹 路径 掩码 int mkdi ...

  8. octave简易操作

    语言以分号;结尾if for while等语句后用,来承接关系if ,elseif ,else ,end;for i=1:10,end;while a>3 ,end;   while true, ...

  9. 1698-Just a Hook 线段树（区间替换）

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  10. spring boot 入门3 如何在springboot 上使用AOP

    Aop是spring的两大核心之一 那么如何在springboot中采用注解的形式实现aop那? 1)首先我们定义一个相关功能的切面类 并 采用@Aspect 注解来声明当前类为切面 同时采用@Com ...