Dan Rubio Dan Rubio - 1 month ago 6
CSS Question

Why can't I create a div that has more than one style element?

I am trying to create div like so using jQuery:

let gridBlock = $("<div style=width:10px; height:20px; background-color:red;></div>");


However when I look at the render page the console shows that the div only has a style of width:

enter image description here

What am I doing wrong?

Answer

Though you have already got the answer in comment but there is a better way to implement using class. The reason css-specificity. Adding style using style attribute is hard to overwrite & need to use !important for that.

So to avoid that you can use the class attribute and define the style in css file

some.css

.someClass {
  width: 10px;
  height: 20px;
  background-color: red;
}

in js file

let gridBlock = $("<div class='someClass'>Hello</div>");

DEMO