js 给某个div增加class 样式（三种方式）

最新推荐文章于 2024-05-06 18:17:39 发布
最新推荐文章于 2024-05-06 18:17:39 发布
阅读量1.8w 收藏 7
点赞数
码农编程进阶笔记
本文链接：https://blog.csdn.net/lxw1844912514/article/details/100028043
版权

第一种：      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

lxw1844912514
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
js去除div里class样式
08-22
js去除div里class样式，自己学习的，分享给大家，大神就不要说我了，谢谢。
vue.js绑定class和style样式（6）
12-29
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和...
JS添加或修改控件的样式(Class)实现方法
01-21
使用js 给页面组件添加class 或者删除class，以及使用jquery的方式添加或修改。 <input id=txtBianCeng type=text /> .lezhu99 { color:#cc0000; } 添加或修改样式（Class） document.getElementById(txtBianCeng).className = lezhu99; 删除样式（Class） document.getElementById(txtBianCeng).className = ; 需要注意的是，在 JavaScript 中，样式使用的是 classN
学习使用js创建class样式的方法代码整理
最新发布
徊忆羽菲
05-06 501
以上三种方法都可以在JavaScript中创建class样式，你可以根据实际需求选择合适的方法。
js 给某个或指定的div增加class 样式
徊忆羽菲
04-12 7764
js 给指定div增加class 样式第一、el.setAttribute('class','abc')第二、 el.setAttribute('className', 'abc')第三、el.className = 'abc' 第一、el.setAttribute(‘class’,‘abc’) <!DOCTYPE HTML> <HTML> <HEAD...
js添加样式class
青天诀的专栏
05-20 5511
最近在看js,好好打基础才是王道，底层的东西不容忽视。 Js添加样式名，在用jQuery的时候很容易的一个add和remove就能解决的问题，但是用js该怎么样处理呢，刚看了一篇文章，菜鸟级的《JavaScript初学者应注意的七个细节》，原文地址 http://developer.51cto.com/art/201101/242546_2.htm 里面有一段就写了这样一个东西：修改样式名，我稍
javaScript给元素添加多个class的简单实现
10-21
在JavaScript中，对HTML元素添加或删除class是常见的操作，特别是在动态改变页面样式时。本文将详细介绍如何使用JavaScript为元素添加多个class，并提供相应的代码示例。 首先，我们需要理解`className`属性。`...
JavaScript动态创建div属性和样式示例代码
12-01
总结来说，JavaScript提供了强大的能力来动态创建和操纵DOM元素，包括创建`div`元素、设置其属性（如`title`、`id`和`class`）以及添加内联样式。这些功能使得JavaScript成为构建动态网页不可或缺的一部分。通过熟练...
js给元素添加class样式
qq_40576178的博客
11-18 6686
图中，左侧和右侧都需要添加不同的class类样式 结构： <div class="left"> <div class="img_bg leftOne" @click="clickLeft('企业文化')">企业文化</div> <div class="img_bg leftTwo" @click="clickLeft('公司目标')">公司目标</div> <div class="img_bg leftT.
JavaScript操作class和style样式代码详解
01-19
废话不多说了，直接给大家贴js代码了，具体代码如下所示： <!doctype html> <html> <head> <meta charset=utf-> <title>无标题文档</title> <style> .fontSize { font-size:px; } .fontWeight { font-weight:bold; } </style> </head> <body> <div id=div class=fontSize xss=removed>div实例文本</div> <button onclick=changeStyle(
js中创建class样式css样式
singlever的博客
06-29 5072
参考文章https://www.cnblogs.com/stephenykk/p/5406614.html 最近特别无聊，写了些脚本优化下浏览器浏览体验 单节点，或者一个节点，我们修改样式是这样的 let kuai = document.querySelector('.xxx') kuai.style.backgroundColor = 'black' 1.获取节点 2.通过节点style修改指定样式 但是如果需要设定的样式有几十个，相同的样式，并且这种样式在页面中的css是...
通过JS给div元素设置样式的几种方法
xiamoziqian的博客
12-17 1万+
一、style &amp;amp;lt;div&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; //js部分 &amp;amp;lt;script&amp;amp;gt; var oDiv = document.querySelector(&amp;quot;div&amp;quot;); //第一种方法：分别添加属性 oDiv.style.width = &amp;quot;2
js添加class
qq_42310995的博客
08-18 2067
$(function(){          var index=${contractVO.style};         var a=document.getElementsByClassName("style");         a[index].classList.add("init");     });
JS添加或修改控件的样式(Class)
szl的专栏
03-17 1万+
使用js 给页面组件添加class 或者删除class，以及使用jquery的方式添加或修改。 1 2 3 4 5 6 7 8 9 10 11 <input id="txtBianCeng" type="text" />        .lezhu99 {      col
js改变class的样式
热门推荐
ykdsg的专栏
09-08 2万+
 一般js可以通过id来改变一个object的属性和样式，但是id在一个页面中是唯一的，当想改变一批object时就无能为力了，但是class可以设置多个，这样就可以通过js设置 里的样式  html>head>    title>title>head>style>.title{background:#0ff; width:150px; height:
js 修改动态修改class css样式
weixin_47996469的博客
04-15 2724
//添加类名变量 let danmakuWrapper = `.danmaku-wrapper{color:${this.danmakuData.color};font-size:${this.danmakuData.height}px;background:${this.danmakuData.bgColor};line-height:1 !important;}` function addNewStyle(newStyle) { //获取样式文件 var .
JS实现给对象添加className.
qq_38384536的博客
06-28 2248
利用函数返回值

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lxw1844912514

你的打赏就是对我最大的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值