js 给某个或指定的div增加class 样式

最新推荐文章于 2024-05-06 18:17:39 发布
最新推荐文章于 2024-05-06 18:17:39 发布
阅读量7.7k 收藏 2
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/89236784
版权

js 给指定div增加class 样式

第一、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>
徊忆羽菲
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js去除div里class样式
08-22
js去除div里class样式，自己学习的，分享给大家，大神就不要说我了，谢谢。
vue.js绑定class和style样式（6）
12-29
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和...
js 给某个div增加class 样式（三种方式）
热门推荐
`宝子的博客
05-03 5万+
js 给某个div增加class 样式（三种方式）
学习使用js创建class样式的方法代码整理
最新发布
徊忆羽菲
05-06 539
以上三种方法都可以在JavaScript中创建class样式，你可以根据实际需求选择合适的方法。
js 根据ID或者Class在指定位置添加div
fangzilixia的专栏
07-07 9329
if本div存在 覆盖原来的内容；if本div不存在 重新添加一个本div 在本div之前插入一个div var newDiv = document.createElement("div"); newDiv.className = "new"; newDiv.id = "new"; newDiv.innerHTML = "some th
通过JavaScript设置类class
二木成林
10-18 809
效果展示 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .redBackground{ background-color: red; } </style> </h...
JS里点击事件判断是否 触发了节点 和给标签添加class属性
a13726226821的博客
07-26 780
$("#activityType").click(function(e){ if(e.target==$("#bb")[0]){ var bb=document.getElementById('bb'); bb.className="active"; $("#aa").removeClass("active")...
javaScript给元素添加多个class的简单实现
10-21
在JavaScript中，对HTML元素添加或删除class是常见的操作，特别是在动态改变页面样式时。本文将详细介绍如何使用JavaScript为元素添加多个class，并提供相应的代码示例。 首先，我们需要理解`className`属性。`...
window.print打印指定div实例代码
09-04
在这种情况下，我们可以通过一些技巧来实现只打印指定的`div`内容。以下是如何使用`window.print`配合JavaScript实现这一目标的详细步骤和示例代码解析： 1. **创建包含要打印内容的`div`**： 在HTML中，将需要...
为指定元素增加样式的js代码
10-29
在JavaScript中，为指定元素增加样式是常见的操作，这通常涉及到DOM（Document Object Model）的操作。在本例中，我们看到一个名为`addClass`的函数，它的目的是为一个DOM元素添加一个或多个CSS类。这个函数的行为...
通过js修改css样式
翱翔-蓝天
01-27 880
在使用这些方法时，重要的是要确保对DOM的操作在元素实际加载到页面之后进行，通常这可以通过将JavaScript代码放在。通过添加或删除CSS类来修改元素样式是一种更灵活的方法，尤其是当相同的样式需要应用于多个元素时。标签的底部或使用事件监听器来保证。这三种方法各有优缺点，选择哪种取决于你的具体需求和上下文。这种方法允许你动态地修改整个文档的CSS规则。它适用于需要动态调整大量样式规则的复杂场景。这是修改单个元素样式的最直接方式。JavaScript允许直接访问HTML元素的。
通过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的所有div元素
https://ligo100.cn 小何博客欢迎访问。
04-10 3796
直接获取 document.querySelectorAll("div.aa") 类似属性选择器的写法 document.querySelectorAll("div[class='aa']") not 选择器 document.querySelectorAll(".aa:not(ul)") document.querySelectorAll需要高版本浏览器支持。这边给一个低版本浏览器上也...
给指定的div追加div
myl_0808的博客
03-03 2307
title: div追加 date: 2019-11-22 原本在个人博客上写了一些博文，现转移到CSDN上 给指定的div追加div 在以前的博客中，曾经写过一个给网页嵌入loading，用到了innerHtml进行div的嵌入 本文中利用js的append函数来给指定 的div嵌入指定的div。 指定div $(".applications-add").click(function (...
【CSS属性选择器灵活应用】以选择父元素下第一个不隐藏的class为“item“的div为例
weixin_42061806的博客
09-05 989
【CSS属性选择器灵活应用】以选择父元素下第一个不隐藏的class为"item"的div为例
JavaScript给元素添加class属性
浪里个小胖子
04-27 5万+
注意：element.classList.remove()、element.classList.add() — ie9及以下不兼容 // 移除div的class属性 obj.classList.remove('active'); // 添加class属性值 // 方式一 obj.className += 'new active'; // 方式二 // obj.className =...
js更改标签属性，样式。。事件 for循环
weixin_30532837的博客
10-29 256
1. 函数都有返回值…… 而方法的本质也是函数，所以也有返回值。 Document.getElementById() 返回的是获取的标签 getElementsByClassName()和getElementsByTagName()返回的是一个数组 Document.getElementsByClassName(“name”)[2].innerHTML=”hahha” 2....
js 指定div下的某个div，根据class修改css
06-03
你可以使用 `document.querySelector` 方法或者 `document.querySelectorAll` 方法来获取指定元素的 DOM 节点，然后通过修改该节点的 `style` 属性来修改 CSS 样式。 下面是一个例子，可以根据指定的 class 名称找到对应的元素并修改其背景颜色： ```javascript // 获取指定 class 名称的第一个元素 const element = document.querySelector('.my-class'); // 修改元素的背景颜色 element.style.backgroundColor = 'red'; ``` 如果你想要修改指定 class 名称的所有元素的样式，可以使用 `document.querySelectorAll` 方法来获取所有匹配的元素，然后遍历这些元素并修改它们的样式。 下面是一个例子，可以根据指定的 class 名称找到所有对应的元素并修改它们的背景颜色： ```javascript // 获取指定 class 名称的所有元素 const elements = document.querySelectorAll('.my-class'); // 遍历所有元素并修改它们的背景颜色 elements.forEach(element => { element.style.backgroundColor = 'red'; }); ``` 在这个例子中，我们使用了 `forEach` 方法来遍历所有匹配的元素，并对每个元素进行背景颜色的修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值