Error while trying to set style with JavaScript

Question

var d = document;
div = d.body.appendChild(d.createElement("DIV"));
div.id = "hi";
div.innerHTML = "Hello World";

cssStyle = ["fontFamily", "fontStyle"];
cssAn = ["Arial", "italic"];

div.style.cssStyle[0] = cssAn[0];

It does not set the style. Instead it returns an error stating "Cannot set property 0 of undefined". What could I have done wrong?

Sorry. I'm new to this site. I don't even know how to do that... — David G
– David G, Commented Apr 2, 2011 at 14:16

Elian Ebbing · Accepted Answer · 2011-04-02 14:10:18Z

6

I think you want:

div.style[cssStyle[0]] = cssAn[0];

answered Apr 2, 2011 at 14:10

Elian Ebbing

19.1k5 gold badges50 silver badges56 bronze badges

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

Comments

Liza Daly · Accepted Answer · 2011-04-02 14:10:55Z

6

cssStyle is not a property of div.style. You want:

div.style[cssStyle[0]] = cssAn[0];

answered Apr 2, 2011 at 14:10

Liza Daly

2,97325 silver badges31 bronze badges

Comments

Erik Kaplun · Accepted Answer · 2011-04-05 16:04:28Z

1

This is not Javascript related — it's a general programming principle.

You have a variable cssStyle that contains "fontFamily" and "fontStyle".

Accessing the property cssStyle of div.style is in no way related to the variable cssStyle.

You need to div.style[cssStyle[0]] = cssAn[0].

EDIT:

Additionally, if you want all properties whose names are in cssStyles and corresponding values in cssAn to be set on div, then, assuming cssStyle and cssAn have the same number of elements, you can:

for (var i = 0; i < cssStyle.length; i += 1) {
    var name = cssStyle[i];
    var value = cssAn[i];
    div.style[name] = value;
}

edited Apr 5, 2011 at 16:04

answered Apr 2, 2011 at 14:11

Erik Kaplun

38.5k15 gold badges102 silver badges113 bronze badges

1 Comment

Erik Kaplun Over a year ago

As a side note, you should rename cssStyle to styleAttrs and cssAn to styleValues to signify that both are arrays. Also, if you want to be correct, CSS means the actual .css files or inline style sheets in the HTML file. Styles that you assign in your JS code (or directly using a style="..." HTML attribute) are, well, just styles.

Collectives™ on Stack Overflow

Error while trying to set style with JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related