用JS动态设置CSS样式常见方法小结(推荐)

JavaScript动态设置CSS样式的方法概述

随着前端开发的发展，JavaScript已成为动态修改网页样式的重要工具。将详细介绍几种常见的JS动态设置CSS样式的方法，希望能对广大前端开发者有所帮助。

一、直接设置style属性

这是最直接、最常见的方法。通过直接访问HTML元素的style属性，我们可以动态地改变元素的样式。例如：

```javascript

element.style.height = '100px'; // 设置元素高度为100像素

```

如果属性名包含连字符（-），则需要采用驼峰式命名法（如`textAlign`）。如果想保留连字符，则使用中括号形式，如 `element.style['text-align'] = 'center'`。

二、通过setAttribute设置属性

除了直接设置style属性，我们还可以使用setAttribute方法来设置元素的属性，包括样式属性。例如：

```javascript

element.setAttribute('height', '100px'); // 设置元素高度属性为100像素

```

但需要注意的是，这种方法只能用于某些属性，相关样式会自动识别。

三、设置style的属性值对CSS样式进行覆盖时，我们可以使用setProperty方法。如果要设置重要的样式，推荐将第三个参数设置为"important"。例如：

```javascript