如何使用 Javascript 或 CSS 在 DIV 上应用媒体查询 [重复]

Posted 2023-03-06

【中文标题】如何使用 Javascript 或 CSS 在 DIV 上应用媒体查询 [重复]

【英文标题】：How to apply Media Queries on a DIV using Javascript or CSS [duplicate]

【发布时间】：2019-01-23 15:47:16

【问题描述】：

我在使用 JavaScript 驱动的网络应用时遇到问题，我希望用户使用滑块更改 div 的大小，但问题是 CSS 不适用于 div 的宽度，所以有没有办法使用 JavaScript 或 CSS 将 CSS 媒体查询应用于宽度一个 div 而不是整个窗口的宽度？？？

【问题讨论】：

能不能发一些代码，没有代码很难理解

你需要用js改变div的宽度，而不是媒体查询

媒体查询旨在根据浏览器宽度更改样式。您正在尝试根据需要 javascript 的滑块更改 div 的宽度。知道了，我建议你尝试一下，当你遇到 js 代码的特定问题时回来

【参考方案1】：

没有看到你的代码，很难说。但是，根据上下文，您可以只更新现有的 <style> 元素 textContent 以包含您所追求的内容。

类似这样的：

document.querySelector('style').textContent +=
    "@entire window and (inner-width:400px)  div  color: blue; "

显然，您需要更新上面的代码以适应您的代码（我只是给出了本质上的语法）。

让我知道你的结果。

【讨论】：

您误读了这个问题，OP 认为媒体查询可以应用于 div 而不是整个页面，这不是媒体查询的设计目的

@Huangism 哦，我明白了 - 我不认为 OP 专注于应用于 DIV - 是的，当然媒体查询不是为此目的而设计的......感谢您的反馈！

【参考方案2】：

在 javascript 中，window 对象的属性称为 innerWidth、innerHeight、outerHeight 和 outerWidth。对于 html 元素，有 offsetHeight 和 offsetWidth。您可以在 javascript 中使用模板来自动调整 CSS 中 width 和 height 的大小，如下所示：

HTMLElement.style.width = window.innerWidth + 'px'