通過媒體查詢更改element.style
[英]Change element.style with media query
問題描述
有沒有一種方法可以通過媒體查詢更改element.style？ 我的網頁上有以下使用html創建的框：
<div class="colored-box" style="width:400px;height:193px;border:5px solid #8CDADF;"></div>
在不同的屏幕尺寸下，我需要將該寬度增大以正確地適合它，是否可以在媒體查詢中更改CSS中的寬度。
3 個解決方案
解決方案1
0 2018-07-27 21:42:01
您無法使用媒體查詢更改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>
解決方案2
0 2018-07-27 21:51:36
如果您可以控制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>
解決方案3
0 2018-07-27 21:52:13
是的，您可以輕松地做到這一點。 我建議您不要使用內嵌樣式，因為您不能通過調整類的媒體查詢來取代內嵌樣式（更不用說內嵌樣式通常是不好的做法）。 這是您要執行的操作：
<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;
}
但這被認為是不好的做法，我不建議這樣做。
使用 JavaScript 對象更改 element.style
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.