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

我个人认为你的DRY太过分了（三个语句做了不同的事情，所以我看不出它是不是干的。）但如果你必须抽象它，那就写一个函数来做它：

{{1}}

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

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 5

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 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'});

---

进一步阅读：

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