您可以通过 JavaScript 将媒体查询特定样式应用于 HTML 元素吗？答案

【问题标题】：Can you apply a Media Query specific style to an HTML element via JavaScript?您可以通过 JavaScript 将媒体查询特定样式应用于 HTML 元素吗？
【发布时间】：2012-05-02 02:05:23
【问题描述】：

传统上，您可以使用 JavaScript 将样式应用于元素：

document.body.style.color = "red";

但是你能以类似的方式应用特定于媒体查询的样式吗？我要说的是：

body {
  color: red;
}

@media only screen and (max-width : 320px) {
  body {
    color: blue;
  }
}

上面的@media-specific 样式。这可以通过 JavaScript 以编程方式应用于元素吗？例如，我想将上述样式应用于 body 元素，但不指定任何 CSS。我想用 JavaScript 来做这一切。这可能吗（以跨浏览器的方式）？

【问题讨论】：

This QuirksMode blog entry 可能是相关的。
Here's an article 就是这样的事情。
我认为您误解了这个问题。我正在尝试将媒体查询 CSS 样式应用于元素。 Adactio 文章是关于使用 CSS 并从中查询派生的屏幕宽度。 Quirksmode 只是使用screen.width 作为条件。我仍然希望我的布局在大小发生变化时做出响应调整，我只想尝试以程序方式应用样式。

标签： javascript html css media-queries

【解决方案1】：

在加载和调整大小时检查窗口的宽度。基本思路：

function resized() {
  var myWidth = 0, 
      myHeight = 0,
      color = "red";
  if( typeof( window.innerWidth ) == 'number' ) {
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }

  if (myWidth <= 320) {
      color = "blue";
  }
  document.body.style.color = color;
}
window.onresize = resized;
resized();

【讨论】：