为一个元素设置多个属性

Question

我试图一次为一个元素设置多个属性。我找到了这个答案，以及对那个答案的这个评论。在那里的JSFiddle中，他不使用字符串作为属性名，与使用字符串的答案相反。

我在第7行添加了以下内容：

else if (at[prop] === html) {
    this.innerHTML = set[idx];
}

但是我得到了以下错误：

未捕获的引用Error：未定义html

评论JSFiddle（已编辑）

Answer 1

在比较中使用'html'。还在recursiveset函数中传递this上下文，以便将this引用到div元素。这个总是引用我们正在执行的函数的“所有者”。如果没有所有者，它将引用窗口。

试试这个：

var manipulateAttributes = function(attr, element) {
  var recursiveSet = function(at, set) {
    for (var prop in at) {
      /* check if object and not a dom node or array */
      if (typeof at[prop] == 'object' && at[prop].dataset == null && at[prop][0] == null) {
        recursiveSet(at[prop], set [prop]);
      } else if (prop == 'html') {
        this.innerHTML = at[prop];
      } else {
        set [prop] = at[prop];
      }
    }
  }.bind(element);
  recursiveSet(attr, element);
}
var test = document.getElementById("test");

manipulateAttributes({
  html: 'hellop',
  style: {
    background: "lightGreen",
    color: "blue",
    width: "100px"
  },
  className: "testclass",
  onclick: function(e) {
    alert("the test div has been clicked and its width is: " + this.style.width);
  }
}, test);

.testclass {
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
}

<div id="test" style="width:200px;height:200px;background:#000;color:#fff;">Test</div>