Inline styling divs using javascript

Question

I am creating an application where I need to style a div as follows using javascript;

var div = document.createElement("div");
div.innerHTML = "xxxxxxxxxx";
div.style.display = "block";
div.style.width = "100%";
div.style.height = "10%";
div.style.background = "#f2dede";
div.style.color = "black";
div.style.position = "fixed";
div.style.padding = "20px";
div.style.top = "50%";
div.style.border = "5px solid #ebccd1";
//div.style.border-radius = "20px";
//div.style.text-align = "center";
//div.style.webkit-border-radius = "20px 0 0 20px";
//div.style.moz-border-radius = "20px 0 0 20px";
document.body.appendChild(div);

There's a fiddle here.

The problem I am facing is that none of the commented lines above will work. As soon as I uncomment them the div won't show.

What could be the cause of this?

nitish koundade · Accepted Answer · 2015-12-02 10:32:36Z

4

You Need to change the code to

div.style.borderRadius = "20px";
div.style.textAlign = "center";
div.style.webkitBorderRadius = "20px 0 0 20px";
div.style.mozBorderRadius = "20px 0 0 20px";

Name of the properties are not same in the javascript as they are in css.

answered Dec 2, 2015 at 10:32

nitish koundade

8115 silver badges12 bronze badges

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

Comments

Ronen Cypis · Accepted Answer · 2015-12-02 10:51:07Z

2

In javascript, an object member can't contain - in its name. You should replace this:

//div.style.border-radius = "20px";
//div.style.text-align = "center";
//div.style.webkit-border-radius = "20px 0 0 20px";
//div.style.moz-border-radius = "20px 0 0 20px";

with

div.style.borderRadius = "20px";
div.style.textAlign = "center";
div.style.webkitBorderRadius = "20px 0 0 20px";
div.style.mozBorderRadius = "20px 0 0 20px";

edited Dec 2, 2015 at 10:51

answered Dec 2, 2015 at 10:32

Ronen Cypis

21.5k1 gold badge22 silver badges25 bronze badges

Comments

Chris Davis · Accepted Answer · 2015-12-02 10:31:26Z

2

You need to change the casing of those properties to camelCase. '-' is an invalid character in JS variable names.

div.style.borderRadius = "20px";
div.style.textAlign = "center";

answered Dec 2, 2015 at 10:31

Chris Davis

4312 silver badges10 bronze badges

Comments

void · Accepted Answer · 2015-12-02 10:33:56Z

2

Name of the CSS properties are different in JS.

div.style.borderRadius = "20px";
div.style.textAlign = "center";
div.style.webkitBorderRadius = "20px 0 0 20px";
div.style.mozBorderRadius = "20px 0 0 20px";

Updated Fiddle

HTML Element Style

answered Dec 2, 2015 at 10:33

void

36.8k10 gold badges72 silver badges111 bronze badges

Comments

Rohit Azad Malik · Accepted Answer · 2015-12-02 10:31:49Z

1

Used to this CamelCase as like this

div.style.borderRadius = "20px";
div.style.textAlign = "center";

answered Dec 2, 2015 at 10:31

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Comments

Chonchol Mahmud · Accepted Answer · 2015-12-02 10:35:12Z

1

Working Link .Your code will be :

var div = document.createElement("div");
div.innerHTML = "xxxxxxxxxx";
div.style.display = "block";
div.style.width = "100%";
div.style.height = "10%";
div.style.background = "#f2dede";
div.style.color = "black";
div.style.position = "fixed";
div.style.padding = "20px";
div.style.top = "50%";
div.style.border = "5px solid #ebccd1";
div.style.borderRadius  = "20px";
div.style.textAlign = "center";
div.style.webkitBorderRadius = "20px 0 0 20px";
div.style.mozBorderRadius = "20px 0 0 20px";
document.body.appendChild(div);

answered Dec 2, 2015 at 10:35

Chonchol Mahmud

2,7338 gold badges42 silver badges77 bronze badges

Collectives™ on Stack Overflow

Inline styling divs using javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related