本文介绍在JavaScript中修改元素CSS样式的三种主要方式。第一种通过cssText属性批量覆盖样式;第二种利用style.setProperty()方法逐个设置属性;第三种直接访问style对象下的具体CSS属性名进行赋值。文中包含HTML结构示例及对应的JS代码实现,帮助开发者理解不同方法的适用场景与语法差异。
JavaScript修改CSS样式的三种常用方法
首先准备以下共用代码片段:
<div id="div"> this is a div </div>
var div=document.getElementById('div');
第一种方法是通过cssText属性来实现。
div.style.cssText='width:250px;height:250px;border:1px red solid;';
第二种方法是使用setProperty()函数。
div.style.setProperty('width','250px'); div.style.setProperty('height','250px'); div.style.setProperty('border','1px red solid');
第三种方法是直接操作CSS属性对应的style属性。
div.style.width = "250px";
div.style.height = "250px";
div.style.border = "1px solid red";
以上即为JavaScript修改CSS样式的三种方法推荐的全部内容。