如何使用Javascript或CSS在DIV上应用媒体查询

Question

我在使用 JavaScript 驱动的Web应用程序时遇到问题，我希望用户使用滑块更改div的大小，但问题是 CSS < / strong>不适用于div宽度，因此可以使用 JavaScript 或 CSS 在宽度上应用 CSS 媒体查询div而不是整个窗口的宽度？？？

Answer 1

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

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

Answer 2

没有看到您的代码，很难说。但是，根据上下文，您可以仅更新现有的<style>元素textContent来包含要查找的内容。

类似这样的东西：

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

很显然，您需要更新上面的代码以适合您的代码（我基本上只是提供了语法）。

让我知道您的结果。