原生js动态的修改样式

最新推荐文章于 2024-08-19 14:11:37 发布

要成为光的女人

最新推荐文章于 2024-08-19 14:11:37 发布

阅读量953

点赞数

分类专栏： js 文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_51614564/article/details/129408358

版权

20 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JavaScript操作HTML元素的class和style属性。通过querySelector选择元素，监听点击事件来改变元素颜色、添加或移除class。强调了使用classList方法来更安全地管理元素类名，如添加、删除和切换类名，并展示了动态修改元素宽度的例子。

摘要由CSDN通过智能技术生成

1.操作元素的class 和style

1.获取需要操作的元素
2.监听点击
3.添加样式

 <div class="btn">切换</div>
var btn=document.querySelector('.btn')
btn.onclick=function(){
 btn.style.color="red"  
}

5.这里是我们可以给这个属性动态的去添加class

btn.onclick=function(){
btn.className='active'
}

6.动态的修改这个btn 的宽度：每点击下宽度就增加100

var counter=1 //监听点击的次数
btn.onclick=function(){
boxEl.className='active'
btn.style.width=100 * counter+'px' //
counter++
}

⚠️ 注意原来通过className 修改 class ，是直接覆盖掉了原来的class。这个是不推荐的。

解决方案：classList

btn.classList.add(class) :添加一个类
btn.classList.remove(class) : 移除类
btn.classList.toggle('active') : 如果类不存在就添加类，存在就移除。来回切换

btn.classList.add("active") 
btn.classList.remove('active')
btn.onclick=function(){
btn.classList.toggle('active')
}

关注

专栏目录