如何使用方法应用一组 css 属性，而无需链接/jquery

Question

I'm currently running the following code to apply an array of css attributes to mimic jquery (I'm not allowed to use jquery) but the loop is only grabbing the first node:

HTMLElement.prototype.css = function(attr) {
    for(i in attr){
        return this.style[i] = attr[i];
    }
}

button.css({
    'width': '58px',
    'height': '55px',
    'font-family': 'century gothic',
    'font-weight': 'bold',
    'padding-left': '2px',
    'padding-top': '0',
    'outline': 'none'
});

What is wrong with my loop?

Answer 1

The function is exited as soon as the first loop executes due to the return statement. Move the return outside of the loop:

 HTMLElement.prototype.css = function(attr) { for (i in attr) { this.style[i] = attr[i]; } return this; // return the original element to enable chaining } var button = document.getElementById('foo'); button.css({ 'width': '58px', 'height': '55px', 'font-family': 'century gothic', 'font-weight': 'bold', 'padding-left': '2px', 'padding-top': '0', 'outline': 'none' });

 <button id="foo">Foo</button>