为什么我不能创建具有多个样式元素的div？

Question

我想，像这样使用jQuery创建的div：

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

然而，当我看着渲染页面的控制台显示DIV只有宽度的风格：

我究竟做错了什么？

Answer 1

虽然你已经得到了在评论的答案，但有实现使用class一个更好的办法。原因css-specificity。使用style属性添加样式难以覆盖&需要使用!important。

因此，为了避免这种情况，你可以使用class属性和CSS文件中的JS文件定义样式

some.css

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

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

DEMO

Answer 2

使用引号交配

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