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
    评论
专栏目录
vue.js绑定class和style样式（6）
12-29
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 通过 v-bind:class 或者 :class 来为style或者class来绑定 绑定class <div class=test> <div class={active:isActive,cc:isCc}></div> </div>
js去除div里class样式
08-22
js去除div里class样式，自己学习的，分享给大家，大神就不要说我了，谢谢。
js 给某个div增加class 样式（三种方式）
热门推荐
lxw1844912514的博客
11-30 1万+
第一种： el.setAttribute('class','abc'); <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>setAttribute('class', 'abc')</t...
学习使用js创建class样式的方法代码整理
最新发布
徊忆羽菲
05-06 501
以上三种方法都可以在JavaScript中创建class样式，你可以根据实际需求选择合适的方法。
同时添加多个class元素H5
MelodyFreedom的博客
07-27 2524
var lockicon = document.createElement("div");  lockicon.classList.add("lockicon","rsize");
【CSS属性选择器灵活应用】以选择父元素下第一个不隐藏的class为“item“的div为例
weixin_42061806的博客
09-05 984
【CSS属性选择器灵活应用】以选择父元素下第一个不隐藏的class为"item"的div为例
原生js获取某个class的所有div元素
https://ligo100.cn 小何博客欢迎访问。
04-10 3791
直接获取 document.querySelectorAll("div.aa") 类似属性选择器的写法 document.querySelectorAll("div[class='aa']") not 选择器 document.querySelectorAll(".aa:not(ul)") document.querySelectorAll需要高版本浏览器支持。这边给一个低版本浏览器上也...
使用js创建div、添加子div并给div设置在css中定义的class选择属性以及设置style属性
木子李的博客
12-14 1万+
使用js创建div、添加子div并给div设置在css中定义的class选择属性以及设置style属性     var parentDiv = document.createElement("div");//创建父div parentDiv.className="CssStyle1";//给父div设置class属性 parentDiv.style.clear="both";//给父div的st
js原生获取某个div下的所有子节点
小橙的博客
12-21 7064
var parentNode = document.getElementById('wrapper'); var inputArray = parentNode.getElementsByTagName('input');
js添加css样式
weixin_50736511的博客
12-01 2386
第一种:用cssText div.style.cssText='width:600px; height:250px; border:1px red solid; text-align: center;line-height: 250px;'; 第二种：用setProperty() div.style.setProperty('width','700px'); div.style.setProperty('height','300px'); div.style.setProperty('line-h
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类。这个函数的行为...
给指定的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 (...
js获取和设置DIV元素class值的方法
qq_33019839的博客
10-10 1万+
web页面中，利用js动态的改变div元素的class属性的值，可以实现很多的动态效果。比如动态修改div元素的背景颜色，改变字体的颜色等等。这篇文章就来说一说，javascript 如何获取和设置div元素class属性的值的方法。 js获取元素class属性值的方法 原生js如果想要获取div元素class属性的值，需要用到 className 方法 示例代码： <div id="moc...
javascript生成div标签并设置class和style
jianchenn的博客
07-13 7911
整体代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box { border: 1px solid #f2f2f2; width: 100px; height: 100px; margin-left: 15px; margin-top: 15px;
js 根据ID或者Class在指定位置添加div
fangzilixia的专栏
07-07 9324
if本div存在 覆盖原来的内容；if本div不存在 重新添加一个本div 在本div之前插入一个div var newDiv = document.createElement("div"); newDiv.className = "new"; newDiv.id = "new"; newDiv.innerHTML = "some th
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、付费专栏及课程。

余额充值