你能用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

问题是只有在您需要添加大量属性时才有用.如果你只有两三个,那就更少了.

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

Answer 1

我个人认为你正在做干太远(三个报表做不同的事情,所以我不明白它是如何的不干燥.)但是,如果你必须将它抽象,只写一个函数来做到这一点:

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

一种无需框架或库（甚至辅助函数）的优雅方法是使用：

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