js如何修改css属性

如何用 JavaScript 修改 CSS 属性

简介

JavaScript 允许你通过 DOM（文档对象模型）修改 CSS 属性，从而动态地改变网页的外观和行为。

修改 CSS 属性的步骤

通过 document.querySelector() 或 document.getElementById() 获取 DOM 元素。

const element = document.querySelector('element-selector');

使用 element.style 属性访问 CSS 属性。

element.style.property = 'new-value';

其中 "property" 是要修改的 CSS 属性名称，"new-value" 是新的属性值。

示例

要将元素的背景色更改为红色，可以使用以下代码：

const element = document.querySelector('p');
element.style.backgroundColor = 'red';

批量修改 CSS 属性

要一次修改多个 CSS 属性，可以使用 element.style.cssText 属性。

element.style.cssText = "color: blue; font-size: 16px; background-color: yellow;";

注意

确保 JavaScript 代码在文档加载后运行。

使用驼峰命名法指定 CSS 属性（例如，"backgroundColor" 而不是 "background-color"）。

使用单位（例如 px、em）指定数值属性的值。

标签： JS css

赏

选择打赏方式

微信 支付宝 QQ钱包

打赏

打赏

打赏