Dan Rubio Dan Rubio - 3 months ago 13
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?


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


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

in js file

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