CODEWITHSUNDEEP
javascripthtmlcss
jonboy
jonboy

Reputation: 2749

Inline styling divs using javascript

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?

Upvotes: 0

Views: 78

Answers (6)

Ronen Cypis
Ronen Cypis

Reputation: 21470

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";

Upvotes: 2

Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

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);

Upvotes: 1

void
void

Reputation: 36703

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

Upvotes: 2

nitish koundade
nitish koundade

Reputation: 801

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.

Upvotes: 4

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Used to this CamelCase as like this

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

Upvotes: 1

Chris Davis
Chris Davis

Reputation: 431

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";

Upvotes: 2

Related Questions