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