Question

例如，div。如果使用JavaScript将width值定义为value1，并且CSS中的相同宽度值定义为value2（value1 != value2），则div将得到哪个值对于width到底？

Answer 1

您可以查看CSS的Specificity。

当您使用javascript时，样式将被添加为内联样式，除非您将其添加为类。

添加到元素的内联样式（例如，style =“font-weight：bold”）总是覆盖外部样式表中的任何样式，因此可以被认为具有最高的特异性。

因此使用js定义的值将覆盖css文件中定义的值

Answer 2

问题尚不清楚，但是在元素本身上定义了样式属性（例如，在其style属性中或通过其style属性，这是该属性的结构化反映），又称“内联”样式，“优先于CSS规则，除非这些CSS规则标记为!important。如果内联样式也具有!important，则会获胜。（请注意，您无法通过!important结构化反射属性上的属性设置style规则;您必须设置属性或设置属性的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>

Answer 3

由于CSS在级联中适用，它将取决于您最后加载的元素。

Answer 4

Javascript将样式添加到元素，因为内联和内联样式的优先级高于css.So，javascript定义的属性（宽度）适用于div。但是如果你在css中定义“！important”而不是根据css设置属性。

找到以下演示：

创建文件demo.css并粘贴下面的代码：

 #test1{
 background-color: green;
 width: 100px ;
 }
#test2{
background-color: green;
width: 100px !important;
 }

创建html文件并粘贴到代码下面：

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" type="text/css" href="demo.css">
  </head>
<body> 
  <div id="test1">
   test1
  </div>
  <div id="test2">
   test2
  </div>
</body>
<script>
  document.getElementById("test1").style.width="200px";
  document.getElementById("test2").style.width="200px";
</script>
</html>

CSS / JavaScript。赋予同一属性价值

4 个答案: