当我们需要使用 JavaScript 动态地修改 HTML 元素的属性时，通常需要分别设置每个属性。但是如果需要一次性设置多个属性，这种方式可能会变得冗长和繁琐。幸运的是，JavaScript 提供了一种更快捷方便的方法来设置元素的多个属性。
使用对象字面量语法
在 JavaScript 中，我们可以使用对象字面量语法 {} 来创建一个包含多个键值对的对象。其中，键表示属性名称，值表示属性值。例如：
const myElement = document.querySelector("#my-element");
myElement.style.color = "red";
myElement.style.fontSize = "24px";上面代码中，我们使用 querySelector 方法选择了一个 ID 为 my-element 的元素，并通过 .style 属性来分别设置了该元素的 color 和 fontSize 属性。
然而，如果要设置多个属性，我们可以使用对象字面量语法将它们组合到同一个对象中，然后一次性将整个对象赋给元素的 .style 属性。如下所示：
const myElement = document.querySelector("#my-element");
myElement.style = {
color: "red",
fontSize: "24px",
};这样，我们就可以一次性设置多个属性，避免了重复的代码，并且使代码更加简洁易读。
注意事项
- 在使用对象字面量语法设置元素的属性时，需要使用对象的属性名而不是字符串。
- 在某些情况下，如果要设置的属性不是字符串类型，可以使用属性名加上中括号的方式来设置。例如：
myElement["data-custom"] = 123;
示例代码
-- -------------------- ---- -------
--------- -----
------
------
-------------- -------- ---------- --- -- ------- -- ---- ---- ------------------
-------
------
---- ----------------------
--------
----- --------- - --------------------------------------
--------------- - -
------ ------
--------- -------
--
---------
-------
-------在上面的示例代码中，我们创建了一个 ID 为 my-element 的空 div 元素，并使用对象字面量语法一次性设置了该元素的 color 和 fontSize 属性。在浏览器中打开该示例代码，你会看到这个元素变成了红色并且字体大小变为 24 像素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26516