JavaScript修改CSS样式的三种常用方法

作者:小圆点

时间:2026-10-30

浏览:252

本文介绍在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样式的三种方法推荐的全部内容。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章