使用 JavaScript 一次为一个元素设置多个属性

javascript

2022-08-30 05:24:06

如何使用JavaScript一次设置多个属性？不幸的是，我无法在这个项目上使用像jQuery这样的框架。以下是我现在拥有的：

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

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

答案 1

你可以做一个帮助程序函数：

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

这样称呼它：

setAttributes(elem, {"src": "http://example.com/something.jpeg", "height": "100%", ...});

答案 2

您可以使用将属性应用于创建的元素。尽管某些“属性（elem.height 等）是只读的，即只有 getter（未定义 setter）的访问器”。Object.assign(...)

请记住，和属性是以像素而不是百分比定义的。你必须使用CSS来使它流畅。heightwidth

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 }