Edit multiple CSS styles using a Javascript function

Question

I found this question on editing css styles in Javascript, in which the solution is to use

document.getElementById('element').style.MozBoxShadow = "1px 1px 1px #000";

I am trying to write a function that takes an array of parameters to edit as so:

var element = document.getElementById('element');
editElementStyles(element, new Array("width", "100%", "height", "100%"...etc.));

And the function:

function editElementStyles(element, args) {
    for (var i = 0; i < args.length; i += 2) {
        element.style.args[i] = args[i + 1];
    }   
}

However, this of course does not work as args[i] is not a property of element.style. How can I make this work?

FYI, new Array(elem1, elem2, elem3, ...) can be expressed more simply as [elem1, elem2, elem3, ...]. — GregL
– GregL, Commented Nov 18, 2014 at 23:26

David Thomas · Accepted Answer · 2014-11-18 23:25:00Z

Simply:

element.style[args[i]] = args[i + 1];

You correctly note that args[i], and args, is not a property of element.style, to counter this you simply use square-bracket notation, rather than dot-notation, to access the properties. Which, incidentally, you were doing with args[i] anyway.

This results in:

function editElementStyles(element, args) {
    for (var i = 0; i < args.length; i += 2) {
        element.style[args[i]] = args[i + 1];
    }   
}

Incidentally, this seems to be a risky way of associating properties and values; I'd suggest:

function editElementStyles (element, styles) {
    for (var prop in styles) {
        if (styles.hasOwnProperty(prop)) {
            element.style[prop] = styles[prop];
        }
    }
}

editElementStyles (elem, {'width' : '100%', 'color' : 'red'});

Jonathan Crowe · Accepted Answer · 2014-11-18 23:25:05Z

2

You may want to change your function to accept an object since what you are really looking for is a key/value pair

editElementStyles(element, {"width" : "100%", "height" : "100%"});


function editElementStyles(element, args) {
    for (var key in args) {
        element.style[key] = args[key]
    }   
}

answered Nov 18, 2014 at 23:25

Jonathan Crowe

5,8031 gold badge20 silver badges28 bronze badges

Comments

GregL · Accepted Answer · 2014-11-18 23:24:54Z

1

Just use the square bracket notation instead, that allows you to use the value of variables for the property name to look up.

i.e. change your function to:

function editElementStyles(element, args) {
    for (var i = 0; i < args.length; i += 2) {
        element.style[args[i]] = args[i + 1];
    }   
}

answered Nov 18, 2014 at 23:24

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Comments

damare · Accepted Answer · 2014-11-18 23:26:17Z

1

Instead of the point notation you can always access such properties in the following ways:

man.age=25

is equivalent to

man['age']=25

So, try this

element.style[args[i]]= args[i + 1];

answered Nov 18, 2014 at 23:26

damare

2011 silver badge5 bronze badges

Comments

albciff · Accepted Answer · 2014-11-18 23:31:10Z

1

Try using:

element.style[args[i]] = args[i+1];

You can access properties through object[property] as you do with object.property.

However as other answers suggests it's better to use a json object instead of array to pass the properties names and values.

edited Nov 18, 2014 at 23:31

answered Nov 18, 2014 at 23:25

albciff

18.6k4 gold badges67 silver badges94 bronze badges

1 Comment

GregL Over a year ago

That last . isn't required.

Collectives™ on Stack Overflow

Edit multiple CSS styles using a Javascript function

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Linked

Related