为一个元素设置多个属性

Question

I'm trying to set multiple attributes to an element at one shot. I found this answer , and this comment to that answer. In the JSFiddle there, he doesn't use a string for the property name, as opposed to the answer which uses a string.

The problem with the JSFiddle in the comment, is that it doesn't have the ability to edit the text for the element. I tried adding that capability, but it didn't work.

I added the following at line 7:

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

But I got the following error:

Uncaught ReferenceError: html is not defined

How can I add the functionality of changing the text to the commented JSFiddle?

Code

Answer JSFiddle

Comment JSFiddle (edited)

Answer 1

Use 'html' in your comparison. Also pass this context in recursiveSet function to refer this to div element. this always refers to the “owner” of the function we're executing. If there is no owner , it will refer to the window ..

Try this:

 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') {