SetAttribute()改变属性值

博客讲述在做轮播小圆点时的新知识点。要为bottons下的span标签添加点击事件,让点击的span标签添加on类。通过for循环遍历添加事件,用内层for循环去除所有span的on类,再用setAttribute为点击的span添加on类,还介绍了该方法的用法。
开发工具与关键技术:VS   setAttribute()
作者:听民谣的老猫
撰写时间:2019/5/25   11:07

最近在做轮播下面的5个小圆点时接触到的新知识点。
在这里插入图片描述
在这里插入图片描述
如果要你为bottons下面的每一个span标签写上点击事件并且你点击哪个span标签on这个类就在哪个span标签上你会怎么做???
在这里插入图片描述
首先肯定是获取bottons下面的每一个span给它们添加点击事件。(我这里是通过for循环遍历5月20号的博客有讲到遍历)
这里为什么for循环里面要套一个同样的for循环?具体我也不知道,不套的话就会报错。
在这里插入图片描述

如果你碰巧知道错误点麻烦告知一下。

通过里面的for循环你可以将span标签所有的on类去除掉,避免给多个span标签同一个on类然后通过this.setAttribute来给你点击的span标签附加上on类。

setAttribute() 方法

setAttribute() 方法用于创建或改变某个新属性。

用法:elementNode.setAttribute(name,value)

参数解析
name必填。需要改变或者创建的属性名。
value必填。属性值

笔记部分:
setAttribute()把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。
在这里插入图片描述
创建属性就像我上面的控制台输出。原来并不是每一个span标签都有class这个属性的,但是使用了setAttribute()后它主动为每个span标签都添加上了这个属性。

### 使用 CSS 和 JavaScript 实现 Hover 事件更改 DOM 元素的数据属性或样式 #### 利用 CSS 更改样式 对于简单的样式变化,可以利用纯 CSS 来实现。当 `.a` 元素被悬停时,`.b` 子元素的颜色变为红色。 ```css .a:hover .b { color: red; } ``` 此方法适用于不需要复杂逻辑的情况,并且不会影响性能[^1]。 #### 结合 JavaScript 动态设置 `data-*` 属性 如果目标是在悬停时更新 HTML 的 `data-*` 自定义属性,则需借助 JavaScript: ```javascript document.querySelector('.target').addEventListener('mouseenter', function() { this.setAttribute('data-state', 'hovered'); }); document.querySelector('.target').addEventListener('mouseleave', function() { this.setAttribute('data-state', ''); }); ``` 这段脚本会在鼠标进入和离开指定的目标元素时分别添加和移除特定的 data 属性值。这允许开发者基于这些数据属性执行进一步的操作或是应用不同的样式规则[^2]。 #### 综合运用 CSS 变量与 JavaScript 修改样式 为了更加灵活地管理样式变更,还可以考虑使用 CSS 变量配合 JavaScript 进行动态调整: ```css .target { --color-primary: blue; } .target.hovering { --color-primary: green; } ``` ```javascript const targetElement = document.querySelector('.target'); targetElement.addEventListener('mouseenter', () => { targetElement.classList.add('hovering'); }); targetElement.addEventListener('mouseleave', () => { targetElement.classList.remove('hovering'); }); ``` 这种方法不仅保持了良好的分离关注点原则(即样式由 CSS 负责),同时也让 JavaScript 控制何时触发样式的切换,从而实现了高效而优雅的效果[^4]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值