Applying Css Style To Dynamically Created Div

I successfully created a div dynamically. But i was wondering is there a way to apply CSS style directly instead of applying style one by one using Javascript.

Solution 1:

DEMO FIDDLE

You should use the className property:

divTag.className = "divdrag";

The div now has the appropriate class name and you just need to add all of your styling to that CSS class.

More info here

Solution 2:

Add

divTag.classList.add("divdrag");

or

divTag.className += "divdrag";

Solution 3:

Use cssText for apply multiple css to created dynamic div.

divTag.style.cssText="align:center; border:1px solid #ccc; margin-top:20px; margin-bottom:20px;";

Updated

Or use simple css based on div1 id

#div1{
    align:center;
    border:1px solid #ccc;
    margin-top:20px;
    margin-bottom:2px;
}

Note you should create the id by

divTag.id = "div1";

Solution 4:

you set the classes with this..

if (divTag.classList) {
  el.classList.add("divdrag");
}
else {
  divTag.className += ' ' + "divdrag";
}