Question

是否可以通过媒体查询更改element.style？我的网页上有以下使用html创建的框：

<div class="colored-box" style="width:400px;height:193px;border:5px solid #8CDADF;"></div>

在不同的屏幕尺寸下，我需要将该宽度增大以正确地适合，是否可以在媒体查询中的CSS中更改该宽度。

Answer 1

您不能通过媒体查询更改style属性。您需要使用JavaScript。您可以做的就是更改当前课程：

<div class="colored-box">aaa</div>

<style>
.colored-box {
  width:400px;
  height:193px;
  border:5px solid red;
}

@media (max-width: 300px) {
  .colored-box {
    width:400px;
    height:193px;
    border:5px solid green;
  }
}
</style>

Answer 2

如果您可以控制HTML（从您的问题中不确定是否可以确定，则可以不确定），您可以在style属性中使用CSS变量，然后通过媒体查询重新定义它们。

例如：

.colored-box {
  --box-width:400px; 
}

@media screen and (min-width: 1000px) {
.colored-box {
  --box-width:800px; 
}

}

 <div class="colored-box" style="width:var(--box-width);height:193px;border:5px solid #8CDADF;"></div>

Answer 3

是的，您可以轻松地做到这一点。我建议您不要使用内嵌样式，因为您不能通过调整类的媒体查询来取代内嵌样式（更不用说内嵌样式通常是不好的做法）。这是您的操作方式：

<style> 
  .colored-box {
  width: 400px;
  height: 193px;
  border: 5px solid #8CDADF;
}

@media screen and (min-width: 1500px) {
  width: 800px;
}
</style>


<html>
  <div class="colored-box"></div>
</html>

或者，如果您只想快速修复并保留代码，则可以使用！important，如下所示：

@media screen and (min-width: 1500px) {
  width: 800px!important;
}

但这被认为是不好的做法，我不建议这样做。

通过媒体查询更改element.style

3 个答案: