Question

我试图创建一个为HTML元素设置多个属性的函数。我在本页面上使用了Stack Overflow用户提供的代码

Setting multiple attributes for an element at once with JavaScript

如果我使用for循环，那么绑定是成功的，但是如果我使用forEach则不是吗？那是为什么？

此作品

Element.prototype.attributeSetter = function(attrs){
  for(var prop in attrs){
    if((prop == "style" || prop == "styles") && (typeof attrs[prop] === 'object')){
        for(var n in attrs[prop]){
           this.style[n] = attrs[prop][n];
        }
    }else if(prop == "html"){
        this.innerHTML = attrs[prop];
    }else{
        console.log("this: ", this);
        this.setAttribute(prop, attrs[prop]);
    }
  }
}

这不起作用

Element.prototype.attributeSetter = function(attrs){
    Object.keys(attrs).forEach(function(prop){
      if((prop == "style" || prop == "styles") && (typeof attrs[prop] === 'object')){
         for(var n in attrs[prop]){
           this.style[n] = attrs[prop][n];
         }
      }else if(prop == "html"){
        this.innerHTML = attrs[prop];
      }else{
        //TypeError: this.setAttribute is not a function
        console.log("this: ", this);
        this.setAttribute(prop, attrs[prop]);
      }
  });
}

但是，如果我不修改元素对象并只使用ForEach循环创建常规函数，它就可以正常工作。

简单实施

var myDiv = document.getElementById("myDiv");

myDiv.attributeSetter({
    class: "coolDiv",
  style: {
    color: "#0110ff",
    border: "2px solid lime"
  },
  "data-order": "one",
  "html": "Cool Div"
});

Answer 1

使用foreach的第二个片段不起作用，因为在foreach内部这个不指向div而是指向window对象，这就是为什么你得到错误this.setAttribute不是函数

更改下面的实现。

Element.prototype.attributeSetter = function(attrs){
   var elem = this;
    Object.keys(attrs).forEach(function(prop){
      if((prop == "style" || prop == "styles") && (typeof attrs[prop] === 'object')){
         for(var n in attrs[prop]){
           elem.style[n] = attrs[prop][n];
         }
      }else if(prop == "html"){
        elem.innerHTML = attrs[prop];
      }else{
        //TypeError: this.setAttribute is not a function
        elem.setAttribute(prop, attrs[prop]);
      }
  });
}

var myDiv = document.getElementById("myDiv");

myDiv.attributeSetter({
    class: "coolDiv",
  style: {
    color: "#0110ff",
    border: "2px solid lime"
  },
  "data-order": "one",
  "html": "Cool Div"
});

 <div id="myDiv"></div>

为什么这不使用forEach进行绑定，但是使用for in循环进行绑定？

1 个答案: