javascript - CSS/JavaScript。为同一属性赋值

Question

<分区>

Answer 1

问题不清楚，但是样式属性是在元素本身上定义的(例如，在其 style 属性中或通过其 style 属性，这是该元素的结构化反射(reflect)属性)，又名“内联样式”，优先于 CSS 规则除非那些 CSS 规则被标记为!important。如果内联样式也具有!important，则它获胜。 (请注意，您不能通过 style 结构化反射属性上的属性设置 !important 规则；您必须设置属性或设置属性的 cssText 属性来完全替换内联样式。)

所以:

document.querySelector(".ex1").style.width = "200px";
document.querySelector(".ex2").style.width = "200px";
document.querySelector(".ex3").setAttribute("style", "width: 200px !important");

div {
  border: 1px solid #ddd;
}
.ex1 {
  width: 300px;
}
.ex2 {
  width: 300px !important;
}
.ex3 {
  width: 300px !important;
}

<div class="ex1">200px (inline wins)</div>
<div class="ex2">300px (CSS wins)</div>
<div class="ex3">200px (inline wins again)</div>