javascript 你能用 DOM 的 setAttribute 函数设置多个属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30535595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you set multiple attributes with the DOM's setAttribute function?
提问by Richard Hamilton
Let's say I wanted to create an input element using the DOM. Instead of doing something like this
假设我想使用 DOM 创建一个输入元素。而不是做这样的事情
var input = document.createElement("input");
input.setAttribute("class", "my-class");
input.setAttribute("type", "checkbox");
input.setAttribute("checked", "checked");
Is there a DRYer way to write these three lines of code into one line.
有没有DRYer的方式把这三行代码写成一行。
I know you could do something like this
我知道你可以做这样的事情
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
The problem is that is only helpful if you have a boatload of attributes you need to add. If you only have two or three, this is even less DRY.
问题是，只有当您需要添加大量属性时，这才有用。如果你只有两三个，那就更不干了。
Is there anyway I can dry up this code?
无论如何我可以干掉这段代码吗？
回答by Mathletics
I personally think you're taking DRYtoo far (the three statements do different things, so I don't see how it's not DRY.) But if you must abstract it, just write a function to do it:
我个人认为你把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);回答by j08691
In jQuery you can do:
在 jQuery 中，您可以执行以下操作：
var $input = $("<input>", {class: "my-class", type: "checkbox", checked:"checked"});
回答by Kaushik Thanki
Yes, You can do using Jquery.
是的，您可以使用 Jquery。
$(input).attr(
{
"data-test-1": num1,
"data-test-2": num2
});
回答by joews
Element.setAttributesets a single attribute, but you could easily write a helper function:
Element.setAttribute设置单个属性，但您可以轻松编写辅助函数：
function setAttributes(elements, attributes) {
Object.keys(attributes).forEach(function(name) {
element.setAttribute(name, attributes[name]);
})
}
Usage:
用法：
var input = document.createElement("input");
setAttributes(input, {
class: "my-class",
type: "checkbox",
checked: "checked"
})
As other answers say, you could also use $.attr. That's great if your project already uses jQuery. If it doesn't, I'd use this function rather than adding a fairly heavyweight dependency for a simple task.
正如其他答案所说，您也可以使用$.attr. 如果您的项目已经使用 jQuery，那就太好了。如果没有，我会使用这个函数，而不是为一个简单的任务添加一个相当重量级的依赖项。
回答by lid
var opt = {"class":"my-class", "type": "checkbox", "checked":"checked"};
Object.keys(opt).forEach( function(key){ input.setAttribute(key,opt[key]); } );
