Question

我试图一次性为元素设置多个属性。我找到了this answer和this comment来回答这个问题。在那里的JSFiddle中，他没有使用字符串作为属性名称，而不是使用字符串的答案。

评论中JSFiddle的问题在于它没有能力编辑元素的文本。我尝试添加该功能，但它没有用。

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

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

但是我收到了以下错误：

未捕获的ReferenceError：未定义html

如何添加将文本更改为注释的JSFiddle的功能？

代码

Answer JSFiddle

Comment JSFiddle（已编辑）

Answer 1

在比较中使用'html'。同时在this函数中传递recursiveSet上下文，以将this引用到div元素。 this总是指我们正在执行的函数的“所有者”。如果没有所有者，则会引用window ..

试试这个：

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>

Answer 2

else if (at[prop] === html) {

替换上面的代码行，如下所示进入循环

else if (at[prop] === 'hellop') {

为元素设置多个属性

代码

2 个答案: