javascript - 通过 javascript matchmedia 设置样式不起作用

Question

大家好， 我尝试禁用某些设备宽度的图像，但它不起作用，代码如下: html

<figure id="quote-one">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</blockquote>
<figcaption>Dummy text  </figcaption>
<img src="http://65.media.tumblr.com/avatar_b557ab7102d7_6.png"> 
</figure>

JavaScript

<script>
window.matchMedia( "(min-width: 20em)" and ("max-width:45em"))
.addListener( function( mm ){
if( mm.matches ){
var el= document.querySelector("#quote-one").getElementsByTagName("img")[0]
el.style.display = "none";}
} );
</script>

https://jsfiddle.net/a56019r4/谢谢。

Answer 1

您的媒体查询字符串语法不正确。 logical and operator属于这样的字符串:

window.matchMedia("(min-width: 20em) and (max-width:45em)")

此外，请注意，仅当媒体发生变化时才会触发此事件，因此您必须执行操作才能触发该事件(也许可以尝试更改显示器的方向)。

您可以在下面的代码片段中看到正在运行的代码:

window.matchMedia("(min-width: 20em) and (max-width:45em)").addListener(function(mm) {
  var el = document.querySelector("#quote-one img");
  if (mm.matches) {
    el.style.display = "none";
  } else {
    el.style.display = "block";
  }
});

<figure id="quote-one">
  <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
  <figcaption>Dummy text</figcaption>
  <img src="http://65.media.tumblr.com/avatar_b557ab7102d7_64.png">
</figure>

这是你的 fiddle 的固定版本: https://jsfiddle.net/a56019r4/2/