用JavaScript同时为一个元素设置多个属性

Question

如何使用JavaScript同时设置多个属性？不幸的是，我不能在这个项目中使用像jQuery这样的框架。以下是我现在拥有的：

var elem = document.createElement("img");

elem.setAttribute("src", "http://example.com/something.jpeg");
elem.setAttribute("height", "100%");
elem.setAttribute("width", "100%");

Answer 1

您可以使用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 }