使用 Jquery 获取媒体查询的值答案

【问题标题】：Get value of media query using Jquery使用 Jquery 获取媒体查询的值
【发布时间】：2018-10-15 21:36:38
【问题描述】：

有没有办法使用 jquery 获取媒体查询中的值？

例子：

@media(max-width:767px) { .story {color: black} }

使用 jquery 获取括号内的值：

max-width:767

【问题讨论】：

首先你不能在 CSS 中使用 jQuery。你想达到什么目的？请添加一些代码 sn-p 并解释您的问题。
我知道我做不到。这不是我要问的。如果可能的话，我没有任何代码 sn-ps 我试图绕开我的脑袋。类似于如何使用 jquery 获取类元素的值属性，我试图获取媒体查询括号内的值。即：var media = 'max-width:767'; 来自 css @media(max-width:767px) { .story {color: black} }
jQuery 使用 DOM 中的元素。您不能使用它从 CSS 中获取值。如果你想获得窗口的当前宽度，那么它是可能的。 var max = $(document).width();
我就是这么想的，但我总是对某些人的想法感到惊讶。

标签： jquery css media-queries

【解决方案1】：

您可以迭代document.styleSheets，检查样式表的.cssRules或.rules规则是否为instanceofCSSMediaRule，如果为真，则迭代CSSMediaRule.cssRules得到CSSMediaRule的.cssText。

@media(max-width:767px) {
  .story {
    color: black
  }
}

<span class="story">span</span>
<script>
  for (let sheet of document.styleSheets) {
    for (let rule of (sheet.cssRules || sheet.rules)) {
      if (rule instanceof CSSMediaRule) {
        cssmedia: for (let prop of rule.cssRules) {
          let mediarules = prop.parentRule.media;
           for (let i = 0; i < mediarules.length; i++) {            
            if (mediarules[i] === "(max-width: 767px)") {
               document.querySelector(prop.selectorText)
               .textContent = prop.cssText;
               break cssmedia;
             }       
           }
        }
      }
    }
  }
</script>

如果你想监听媒体查询的变化，你可以使用window.matchMedia()，.addListener()；见Testing media queries

  var mql = window.matchMedia("(max-width: 767px)");
  mql.addListener(query)
  query(mql)
  function query(mediaquery) {
    console.log(mediaquery);
    if (mediaquery.matches) {
      // media query matches
    } else {
      // media query does not match
    }
  };

【讨论】：

【解决方案2】：

在调整窗口大小时测量屏幕宽度，我检查了由媒体查询更改的 css 规则。这样，无论浏览器如何处理滚动条，媒体查询都会同时触发。

$(document).ready(function() {

    checkSize();

    $(window).resize(checkSize);
});

function checkSize(){
    if ($(".sampleClass").css("float") == "none" ){

    }
}

【讨论】：