在浏览器调整大小（视口宽度）时动态添加类

Posted 2023-03-06

【中文标题】在浏览器调整大小（视口宽度）时动态添加类

【英文标题】：Dynamically add class on browser resize (viewport width)

【发布时间】：2015-02-25 00:16:41

【问题描述】：

我有一个名为 jobfilter 的元素，我想根据视口宽度添加一个类，即。当我将浏览器大小调整为

现在，借助此链接：$(window).width() not the same as media query，我设法让它工作了一半。 使用这个：

  function checkPosition() 
    if (window.matchMedia('(max-width: 767px)').matches) 
        //...
     else 
        //...
    

这是我的 JSFiddle：http://jsfiddle.net/ck55Lf01/10/。

如果您调整浏览器大小并刷新页面，jobfilter 会隐藏，但我希望这种情况动态发生，而不是在页面刷新时发生，谢谢您的帮助！

【问题讨论】：

为什么不使用没有 Jquery 的 css mediaQueries？它会更容易工作

【参考方案1】：

你必须监听 resize 事件。

$( window ).resize(function() 
   checkPosition();
);

【参考方案2】：

这是我用来在调整大小时动态检查窗口宽度的函数，我将它包装在一个文档就绪函数中，该函数将 $ 作为参数传递，以防止与使用 $ 的其他 javascript 库可能发生的任何冲突。例如，如果您要在 wordpress 主题或插件中使用您的函数。

Jsfiddle 示例：http://jsfiddle.net/larryjoelane/ck55Lf01/24/

Javascript：

/*
document ready function used to prevent conflict with other javascript libraries
that use the $ parameter
*/
jQuery(document).ready(function($)

     //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;

          //if the window width is less than the maxWidth pixels on document loading
          if(winWidth < maxWidth)//begin if then

            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");

         //end if then



$(window).resize(function()//begin resize event


    //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;    


         //if the window width is less than maxWidth pixels
         if(winWidth < maxWidth)//begin if then

            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");

         
         else

            //remove the class hidden                 
            $(".jobfilter").removeClass("hidden");


     //end if then else


     );//end window resize event

);//end document ready function

【参考方案3】：

使用 resize 事件检查窗口是否调整大小。使用此代码

$( window ).resize(function() 
function checkPosition() 
if (window.matchMedia('(max-width: 767px)').matches) 
    //...
 else 
    //...

希望对你有帮助

【参考方案4】：

$(document).ready(function()
   DOaction(); // run function after document ready
    $(window).on('resize',DOaction); // on resize window run function
);
// function to add and remove hidden class
function DOaction()
    if($(window).width() <= 1000)
        $(".jobfilter").addClass('hidden');
    else
        $(".jobfilter").removeClass('hidden');
    

Jsfiddle

【参考方案5】：

2021 年 8 月更新

matchMedia 有一个事件监听器仍然是一个鲜为人知的事实。每当它发生变化时，它都会触发一个“变化”事件。您可以使用它来根据它是否匹配来切换一个类，并监听该匹配的变化，而无需将任何东西绑定到（可能很重的）窗口调整大小事件。

function doSomething(matches) 

    if (matches) 
        // media query matches
     else 
        // media query does not match
    



const query = window.matchMedia("(max-width: 767px)");
query.addEventListener("change", ( matches ) => doSomething(matches));
doSomething(query.matches);

MDN 也提到了这一点。

原答案

鲜为人知的事实：matchMedia 有一个事件监听器：

function handleMedia(mql) 

    if (mql.matches) 
        // media query matches
     else 
        // media query does not match
    



var mql = window.matchMedia('(max-width: 767px)').addListener(handleMedia);
handleMedia(mql);

每次浏览器匹配或不匹配媒体查询时，都会执行事件监听器。在您的情况下，我建议您也手动触发处理程序（如示例中所示），以确保在加载时设置正确的类。

这个例子取自MDN（虽然它隐藏得很好）。

【讨论】：

你是英雄，刚刚在MDN上看到这个，完全错过了听众！