你能用 DOM 的 setAttribute 函数设置多个属性吗？

Question

假设我想使用 DOM 创建一个输入元素。 而不是做这样的事情

var input = document.createElement("input");
input.setAttribute("class", "my-class");
input.setAttribute("type", "checkbox");
input.setAttribute("checked", "checked");

有没有一种 DRYer 方法可以将这三行代码写成一行。

我知道你可以做这样的事情

var attributes = ["class", "type", "checked"];
var values = ["my-class", "checkbox", "checked"];

for (var i = 0; i < attributes.length; i++) {
  input.setAttribute(attributes[i], values[i])
end

问题是，只有当您有大量需要添加的属性时，这才有用。 如果你只有两三个，这就更不DRY了。

无论如何我可以干掉这段代码吗？

Answer 1

我个人认为你把DRY走得太远了（这三个语句做了不同的事情，所以我看不出它怎么不是 DRY。）但是如果你必须抽象它，只需编写一个函数来完成它：

 var input = document.createElement("input"); function setAttributes(el, options) { Object.keys(options).forEach(function(attr) { el.setAttribute(attr, options[attr]); }) } setAttributes(input, {"class": "my-class", "type": "checkbox", "checked": "checked"}); console.log(input);

Answer 2

在 jQuery 中，您可以执行以下操作：

var $input = $("<input>", {class: "my-class", type: "checkbox", checked:"checked"});

Answer 3

是的，您可以使用 Jquery。

$(input).attr(
{
  "data-test-1": num1, 
  "data-test-2": num2
});

Answer 4

Element.setAttribute设置单个属性，但您可以轻松编写一个辅助函数：

function setAttributes(elements, attributes) {
  Object.keys(attributes).forEach(function(name) {
    element.setAttribute(name, attributes[name]);
  })
}

用法：

var input = document.createElement("input");
setAttributes(input, {
  class: "my-class",
  type: "checkbox",
  checked: "checked"
})

正如其他答案所说，您也可以使用$.attr 。 如果您的项目已经使用 jQuery，那就太好了。 如果没有，我会使用这个函数，而不是为一个简单的任务添加一个相当重量级的依赖项。

Answer 5

var opt = {"class":"my-class", "type": "checkbox", "checked":"checked"};

Object.keys(opt).forEach( function(key){ input.setAttribute(key,opt[key]); } );

Answer 6

没有框架或库（甚至辅助函数）的优雅方法是使用：

Object.assign(element, attributes);

其中第二个参数attributes是一个对象字面量，其中：

• keys代表属性属性
• 这些values表示属性值。

这意味着：

var input = document.createElement("input");
input.setAttribute("class", "my-class");
input.setAttribute("type", "checkbox");
input.setAttribute("checked", "checked");

可以写成：

const input = document.createElement("input");
Object.assign(input, {class: 'my-class', type: 'checkbox', checked: 'checked'});

或者，如果您愿意：

const input = document.createElement("input");

Object.assign(input, {
  class: 'my-class',
  type: 'checkbox',
  checked: 'checked'
});

---

延伸阅读：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign