js改变class的样式

最新推荐文章于 2024-08-02 23:25:51 发布
最新推荐文章于 2024-08-02 23:25:51 发布
阅读量2.5w 收藏 5
点赞数 1
文章标签： class object div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ykdsg/article/details/2901032
版权

 一般js可以通过id来改变一个object的属性和样式，但是id在一个页面中是唯一的，当想改变一批object时就无能为力了，但是class可以设置多个，这样就可以通过js设置 <div class="title"> <div>里的样式


 

  1. <html>
  2. <head>
  3.     <title></title>
  4. </head>
  5. <style>
  6. .title
  7. {
  8. background:#0ff; width:150px; height:150px;
  9. }
  10. .title_other
  11. {
  12. background:#ff0; width:150px; height:150px;
  13. }
  14. </style>
  15. <script>
  16. function changeCss()
  17. {
  18.     var arr = document.getElementsByTagName('div');
  19.     var num = arr.length;
  20.     for(var i=0;i<num;++i)
  21.     {
  22.         if(arr[i].className == "title")
  23.         {
  24.             arr[i].className = "title_other";
  25.         }
  26.     }
  27. }
  28. </script>
  29. <body>
  31. <div class="title" onmouseover="changeCss()">变化1</div>
  32. <div class="title" onmouseover="changeCss()">变化2</div>  
  33. <div class="title" onmouseover="changeCss()">变化3</div>
  35. </body>
  36. </html>
ykdsg
关注
js 修改html class属性,关于JS动态修改CSS样式问题（class和style）
weixin_42498987的博客
06-03 2137
有时我们需要动态生成效果，那么就需要对页面的css进行各种处理，进而达到一些样式的改变。如动画，拖放等效果。所以使用JS正确的来对页面样式修改是灰常重要的。修改标签的class属性值直接在css中定义多种css类型 然后在事件中对DOM对象的class属性进行切换，是最简单可行的一种方式。也是目前使用最多的方法。此方法会覆盖对象原有的class属性 var obj = document.getE...
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样式的修改、添加及删除的方法
10-24
主要介绍了js实现class样式的修改、添加及删除的方法,主要通过修改标签的className来实现这一功能,非常具有实用价值,需要的朋友可以参考下
js 修改动态修改class css样式
weixin_47996469的博客
04-15 2741
//添加类名变量 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 .
【Web APIs】JavaScript 操作元素 ⑤ ( 修改元素样式属性 | 行内样式操作 - element.style | 类名样式操作 | 类列表样式操作 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-02 1372
一、修改元素样式属性 二、行内样式操作 1、行内样式操作 2、行内样式操作优缺点 3、行内样式操作适用场景 4、完整代码示例 三、类名样式操作 1、类名样式操作 2、完整代码示例 四、类列表样式操作 1、Element.classList 简介 2、Element.classList#add 函数 3、Element.classList#toggle 函数 4、完整代码示例
javascript基础 通过修改class来修改样式
老刘的日志博客
01-13 5894
function addClassName(element,value) { if(!element.className){ element.className = value; } else { element.className += " "; element.className += value; } }其实直接通过对象的
js中怎么使用classList属性修改元素的class样式
m0_68094390的博客
05-20 1651
举个例子，如下为一个按钮点击事件，点击按钮时触发add()方法添加类名addStyle，再次点击时调用remove()方法移除类名addStyle。
js给指定class类的对象，添加或者移除class类，以及js动态修改其css样式
weixin_42966151的博客
06-29 511
【代码】js动态给指定class类的对象，添加或者移除class类，以及动态修改其css样式。
JS添加或修改控件的样式(Class)实现方法
10-21
本文将详细介绍如何使用JavaScript和jQuery来添加或修改控件的样式（Class）。 首先，我们来看纯JavaScript的方法。在HTML中，我们通常会为元素定义一些CSS类，这些类包含了特定的样式规则。例如，我们有一个类名为...
vue.js绑定class和style样式（6）
12-29
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和...
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属性来间接修改样式）
YRB20的博客
07-26 1375
通过更改类名来修改元素的属性 <style type="text/css"> .b1{ width: 150px; height: 150px; background-color: green; } .b2{ width: 250px; height: 250px; background-color: greenyellow; } </style>
通过JS修改CSS样式
热门推荐
Lanly-Li的博客
08-03 2万+
通过JS修改CSS样式有两种方法： 修改某一属性的值 修改某一元素的class名，使其被别的样式修饰 修改某一属性的值 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title&g...
JS-10 元素的特性/分类/操作、dataset、JS动态修改样式class/style、className和classList、元素的创建/插入/移除/克隆、元素/Windows的大小与滚动
qq_54075517的博客
06-06 1528
元素的特性/分类/操作、dataset、JS动态修改样式class/style、className和classList、元素的创建/插入/移除/克隆、元素/Windows的大小与滚动
通过js修改css样式
翱翔-蓝天
01-27 1017
在使用这些方法时，重要的是要确保对DOM的操作在元素实际加载到页面之后进行，通常这可以通过将JavaScript代码放在。通过添加或删除CSS类来修改元素样式是一种更灵活的方法，尤其是当相同的样式需要应用于多个元素时。标签的底部或使用事件监听器来保证。这三种方法各有优缺点，选择哪种取决于你的具体需求和上下文。这种方法允许你动态地修改整个文档的CSS规则。它适用于需要动态调整大量样式规则的复杂场景。这是修改单个元素样式的最直接方式。JavaScript允许直接访问HTML元素的。
js修改css的样式
weixin_41987365的博客
06-19 979
网上查的，记录一下，方便自己以后用到 $(“span”).css(“css属性名”,“属性值”) 1、.css(“样式”)：获得样式值，比如(&quot;input&quot;).css(&quot;color&quot;)获得input中字体的颜色2、.css(&quot;样式&quot;,&quot;value&quot;):为样...
js修改class里的样式
04-29
在JavaScript中，我们可以使用DOM（文档对象模型）来修改元素的样式，包括修改class中的样式。有两种方法可以修改class中的样式。 方法一：使用元素的classList属性 1.获取要修改样式的元素 var elem = document.getElementById("myElement"); 2.使用classList来添加、删除或替换class中的样式 elem.classList.add("newClass"); //添加一个新的样式类 elem.classList.remove("oldClass"); //移除一个旧的样式类 elem.classList.replace("oldClass", "newClass"); //替换旧样式类为新样式类 方法二：使用元素的className属性 1.获取要修改样式的元素 var elem = document.getElementById("myElement"); 2.使用className来替换整个class属性 elem.className = "newClass"; //替换整个class为新的样式类 需要注意的是，使用className替换整个class属性会覆盖掉原来的class属性，如果原来的class中有其他样式类，需要将所有样式类一并写入新的class中。而使用classList则不需要考虑这个问题，可以直接添加、删除或替换单个样式类。 以上就是在JavaScript中修改class中的样式的两种方法，开发者可以根据实际需要选择适合的方法来修改样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值