有没有一种方法可以通过媒体查询更改 element.style ？我的网页上有这些框，它们是使用 html 创建的:
<div class="colored-box" style="width:400px;height:193px;border:5px solid #8CDADF;"></div>
在不同的屏幕尺寸下，我需要该宽度变大以正确适应，无论如何可以在媒体查询中的 CSS 中更改它。
最佳答案
是的，您可以轻松做到这一点。我建议不要使用内联样式，因为您不能使用调整类的媒体查询来否决内联样式(更不用说内联样式通常是不好的做法)。以下是您将如何做到这一点:
<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，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51565852/