在前端开发中，我们经常需要使用 JavaScript 动态地修改 HTML 元素的样式。对于单个 CSS 样式属性，我们可以使用 element.style.property 来设置它的值。但是如果要同时设置多个 CSS 样式属性，该怎么做呢？本文将介绍几种实现方法。
方法一：使用 element.setAttribute()
我们可以使用 element.setAttribute() 方法来设置元素的 style 属性，从而修改其多个 CSS 样式属性。具体步骤如下：
- 创建一个对象，包含要设置的 CSS 样式属性和对应的值。
- 遍历这个对象，在循环中使用
setAttribute()方法将每个 CSS 属性添加到style属性中。
示例代码如下：
-- -------------------- ---- ------- ----- ------ - - ------ ------ --------- ------- ----------- ------ -- --- ---- ---- -- ------- - ----------------------------- --------- ------------------- -
方法二：使用 Object.assign()
另一种设置多个 CSS 样式属性的方法是使用 Object.assign() 函数。该函数可以将多个对象合并为一个，并返回该对象。因此，我们可以使用它来创建一个新对象，其中包含要设置的 CSS 样式属性和对应的值。然后，我们可以使用 element.style 将该对象应用到元素上。
示例代码如下：
const styles = {
color: 'red',
fontSize: '16px',
fontWeight: 'bold'
};
Object.assign(element.style, styles);方法三：使用 CSS 类
最后一种设置多个 CSS 样式属性的方法是使用 CSS 类。我们可以创建一个 CSS 类，其中包含要设置的样式属性和对应的值。然后，我们可以使用 JavaScript 将该类添加到元素上。
示例代码如下：
.my-style {
color: red;
font-size: 16px;
font-weight: bold;
}element.classList.add('my-style');总结
本文介绍了三种在 JavaScript 中设置多个 CSS 样式属性的方法。第一种方法是使用 setAttribute() 方法，第二种方法是使用 Object.assign() 函数，第三种方法是使用 CSS 类。这些方法都有其优点和缺点，根据具体情况选择最适合的方法即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10391
