第一种：      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-ICPC程序设计竞赛五月月赛（同步赛）-B-杨老师游戏

    题目链接:杨老师游戏 题目分析:将9个数字分成3块,分块枚举,话句话说,9个数字的所有排列组合,如果满足N=a*b-c就是一个答案,暴力枚举Orz. 代码如下:  #include<iostre ...

  2. 独木舟（51NOD 1432 ）

    n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? Input 第一行包含 ...

  3. web前端总结面试问题<CSS&HTML问题>

    一个父元素div,一个未知宽度.高度的子元素div [上下左右居中方法总结] //1.position布局,position设为absolute,其他同情景一 2.display:table 父级元素 ...

  4. grafana使用Prometheus数据源监控mongo数据库

    数据库改用mongo后,监控需求就需要整合进grafana里,由于一直在坚持docker化部署,那么此次也不例外. 1. 安装Prometheus: What is Prometheus? Prome ...

  5. iWebShop产品功能技术优势有什么？

    iwebshop基于iweb si 框架开发,在获得iweb si 技术平台支持的条件下,iwebshop可以轻松满足用户量级百万至千万级的大型电子商务网站的性能要求.站点的集群与分布式技术(分布式计 ...

  6. ruby OpenURI模块使用

    OpenURI is an easy-to-use wrapper for Net::HTTP, Net::HTTPS and Net::FTP(OpenURI支持重定向) 像打开普通文件那样打开ht ...

  7. Leecode刷题之旅-C语言/python-70爬楼梯

    /* * @lc app=leetcode.cn id=70 lang=c * * [70] 爬楼梯 * * https://leetcode-cn.com/problems/climbing-sta ...

  8. Leecode刷题之旅-C语言/python-69x的平方根

    /* * @lc app=leetcode.cn id=69 lang=c * * [69] x 的平方根 * * https://leetcode-cn.com/problems/sqrtx/des ...

  9. ESP32 LyraT音频开发板试玩(二)：播放音乐

    我是卓波,很高兴你来看我的博客. 系列文章: ESP32 LyraT音频开发板试玩(一):搭建开发环境 ESP32 LyraT音频开发板试玩(二):播放音乐 本文延续上一篇博客 将D:\msys32\ ...

  10. 剑指offer题目系列一

    本篇介绍<剑指offer>第二版中的四个题目:找出数组中重复的数字.二维数组中的查找.替换字符串中的空格.计算斐波那契数列第n项. 这些题目并非严格按照书中的顺序展示的,而是按自己学习的顺 ...