如何使用 JavaScript 一次设置多个属性？不幸的是，我无法在这个项目中使用像 jQuery 这样的框架。这是我现在所拥有的：
var elem = document.createElement("img");
elem.setAttribute("src", "http://example.com/something.jpeg");
elem.setAttribute("height", "100%");
elem.setAttribute("width", "100%");
使用 JavaScript 一次为一个元素设置多个属性
IT技术
javascript
2021-01-29 17:47:22
6个回答
你可以做一个辅助功能：
function setAttributes(el, attrs) {
for(var key in attrs) {
el.setAttribute(key, attrs[key]);
}
}
像这样调用它：
setAttributes(elem, {"src": "http://example.com/something.jpeg", "height": "100%", ...});
您也许可以使用Object.assign(...)将您的属性应用于创建的元素。尽管一些“属性（elem.height 等）是只读的，即只有一个 getter（未定义的 setter）的访问器”。
请记住，height和width属性以像素为单位定义，而不是百分比。您必须使用 CSS 使其流畅。
var elem = document.createElement('img')
Object.assign(elem, {
className: 'my-image-class',
src: 'https://dummyimage.com/320x240/ccc/fff.jpg',
height: 120, // pixels
width: 160, // pixels
onclick: function () {
alert('Clicked!')
}
})
document.body.appendChild(elem)
// One-liner:
// document.body.appendChild(Object.assign(document.createElement(...), {...})).my-image-class {
height: 100%;
width: 100%;
border: solid 5px transparent;
box-sizing: border-box
}
.my-image-class:hover {
cursor: pointer;
border-color: red
}
body { margin:0 }如果您需要 framework-esq 语法（注意：仅支持 IE 8+），您可以扩展Element原型并添加您自己的setAttributes功能：
Element.prototype.setAttributes = function (attrs) {
for (var idx in attrs) {
if ((idx === 'styles' || idx === 'style') && typeof attrs[idx] === 'object') {
for (var prop in attrs[idx]){this.style[prop] = attrs[idx][prop];}
} else if (idx === 'html') {
this.innerHTML = attrs[idx];
} else {
this.setAttribute(idx, attrs[idx]);
}
}
};
这让你可以使用这样的语法：
var d = document.createElement('div');
d.setAttributes({
'id':'my_div',
'class':'my_class',
'styles':{
'backgroundColor':'blue',
'color':'red'
},
'html':'lol'
});
试试看：http : //jsfiddle.net/ywrXX/1/
如果你不喜欢扩展一个宿主对象（有些人反对）或者需要支持 IE7-，就用它作为一个函数
请注意，setAttribute这不适用于styleIE 或事件处理程序（无论如何你都不应该）。上面的代码处理style，但不处理事件。
文档
你可以编写一个 ES5.1 辅助函数：
function setAttributes(el, attrs) {
Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
}
像这样调用它：
setAttributes(elem, { src: 'http://example.com/something.jpeg', height: '100%' });
您可以创建一个带有可变数量参数的函数：
function setAttributes(elem /* attribute, value pairs go here */) {
for (var i = 1; i < arguments.length; i+=2) {
elem.setAttribute(arguments[i], arguments[i+1]);
}
}
setAttributes(elem,
"src", "http://example.com/something.jpeg",
"height", "100%",
"width", "100%");
或者，您在对象上传递属性/值对：
function setAttributes(elem, obj) {
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
elem[prop] = obj[prop];
}
}
}
setAttributes(elem, {
src: "http://example.com/something.jpeg",
height: "100%",
width: "100%"
});
您还可以制作自己的可链接对象包装器/方法：
function $$(elem) {
return(new $$.init(elem));
}
$$.init = function(elem) {
if (typeof elem === "string") {
elem = document.getElementById(elem);
}
this.elem = elem;
}
$$.init.prototype = {
set: function(prop, value) {
this.elem[prop] = value;
return(this);
}
};
$$(elem).set("src", "http://example.com/something.jpeg").set("height", "100%").set("width", "100%");