JavaScript 如何修改元素样式

在网页上，我们经常需要让按钮点击后变色、让图片悬停后变大，这些动态效果大多离不开JavaScript。很多人以为修改样式得靠CSS，但其实用JS也能灵活调整，而且能做到很多CSS做不到的交互效果。

直接修改元素的style属性

这是最常用的方法，就像给元素写“专属穿搭指令”。每个网页元素都有一个叫style的属性，里面存着这个元素的所有行内样式。比如我们想把一个按钮的文字颜色改成红色，代码可以这么写：先找到这个按钮，再给它的style.color赋值。就像你找到朋友，直接说“把你的外套换成红色”，简单直接。

不过这里要注意一个小细节：CSS里的样式属性，有些带短横线，比如background-color，在JS里得改成驼峰写法backgroundColor，不然浏览器会不认。就像平时叫“外卖”，在代码里得写成“takeout”，小规则要记牢。

用CSS类批量修改样式

如果要改的样式多，一个个写属性会很麻烦，这时候用CSS类就高效多了。先在CSS里写好一个类，比如.active，里面定义好需要的样式：背景变蓝、文字变白、加个圆角。然后在JS里，找到目标元素，直接给它加上这个类就行，相当于给元素换上提前准备好的一套衣服。

如果想移除样式，就用remove方法删掉这个类；想切换样式（点击一次加类，再点一次删类），用toggle方法更方便，就像开关一样，点一下换状态。这种方法的好处是样式都统一写在CSS里，代码更整洁，以后要调整样式也不用改JS，适合复杂的效果。

注意常见的小误区

很多人刚开始用JS改样式，容易踩两个坑。第一个是找不到元素就写修改代码，比如页面上还没加载出按钮，就去修改它的样式，这时候JS会报错，就像你还没找到朋友，就喊“换外套”，肯定会落空。解决办法是把代码放在页面底部，或者用DOMContentLoaded事件，等页面加载完再执行。

第二个是样式优先级的问题，有时候用JS改了样式，却没生效，可能是因为CSS里的样式加了!important，或者选择器优先级更高。就像你想让朋友换外套，但他的校服（CSS高优先级样式）已经穿在身上，得先脱了校服才能换，这时候可能需要调整选择器，或者用!important强制修改，但尽量少用，不然会让代码变得混乱。

其实JS修改样式的核心，就是把“静态的样式规则”变成“可交互的动态指令”。从简单的改颜色、改大小，到复杂的导航栏吸顶、轮播图切换效果，都是靠这几个基础方法组合出来的。只要先学会找到元素，再用style属性或CSS类来调整，就能做出很多实用的小效果了。