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

Question

传统上，您可以使用 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 来做这一切。这可能吗（以跨浏览器的方式）？

Answer 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();