Question

我正在尝试为元素添加一些属性，例如href，download

看看下面的代码

var el = document.createElement('a');
el.href = '..'
el.download  = 'foo.mp3'

以上方法有效，但在我看来el被视为js Object，而.href，.download是属性。

如：

Person = {};
Person.name = 'foo'
Person.age  = 25

在上面的示例中，我可以简单地执行以下操作，该操作与上面的操作相同：

Person = {name: 'foo', age: 25}

但不适用于el，例如：

el = {href: '..', download: 'foo.mp3'}

那么，为什么它不起作用，我在做什么错呢？如果有的话。

Answer 1

对象是被修改的东西，而不是重新分配。您是对的el是一个对象。当您使用=进行更改时，它将不再引用该元素。

您可以使用for..in循环。

let obj = {href: '..', download: 'foo.mp3'};
for(let k in obj){
   el[k] = obj[k]
}

请参见下面的工作示例。

var el = document.createElement('div');
let obj = {className:'red', id:'big', innerHTML:'Text'};
for(let k in obj){
  el[k] = obj[k]
}
document.body.appendChild(el)

.red{
  color:red;
}
#big{
  font-size:40px;
}

Answer 2

=将覆盖变量或对其进行设置。在您的情况下，您要覆盖变量而不是更改其属性。

 el = {href: '..', download: 'foo.mp3'}

要更改其属性，请通过maheer签出解决方案。

Answer 3

href和download不仅仅是常规属性。它们是getter / setter对，它们反映了您对DOM所做的更改。一个例子是：

  let obj = {
    get prop() { console.log("property retrieved"); },
    set prop(v) { console.log("property set to " + v); },
  };

  obj.prop = "test"; // this calls the setter
  obj = { prop: "test" }; // this does not trigger the setter, it replaces the object as a whole

Answer 4

如果使用document.createElement，则必须使用elment.setAttribute定义属性值，例如：

let el = document.createElement('a');
el.setAttribute("href","yor_ref");
...

如何使用对象向元素添加属性

4 个答案: