How to apply an array of css attributes with a method, without chaining/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?

this should not be tagged jquery because you dont accept jquery solution — guradio
– guradio, Commented May 5, 2016 at 7:50
nothing is executed after the return which breaks the for loop — slash197
– slash197, Commented May 5, 2016 at 7:51
"only grabbing the first node" ? Can you make us run the demo ? — Rayon
– Rayon, Commented May 5, 2016 at 7:51
@Suazi that's because you are returning inside the loop, so only the first iteration will be completed and only the first element of css will be applied. — cнŝdk
– cнŝdk, Commented May 5, 2016 at 7:57

Rory McCrossan · Accepted Answer · 2016-05-05 07:52:51Z

2

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>

answered May 5, 2016 at 7:52

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rory McCrossan Over a year ago

Using the CSS style names is fine in this case as they are being applied through bracket notation, not the style object property directly. Either would work though.

Rayon Over a year ago

Ooh yes.. True!...+1

Rory McCrossan Over a year ago

No problem, glad to help

Collectives™ on Stack Overflow

How to apply an array of css attributes with a method, without chaining/jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related