JQuery宽度方法 - 防止页面刷新

Question

我在使用width（）方法更改窗口宽度时更改css，但代码仅在每次刷新页面后才能工作。有没有办法在没有页面刷新的情况下做到这一点？

8

Answer 1

您的mod变量正在resize事件处理程序之外定义，因此只在页面首次加载时才更新一次。

将其移动到事件处理程序中。

$(window).resize(function(){
   var mod = $(window).width();

   if(mod < 800){
        $(".information").css({"color":"green"});
     }
   else{    
        $(".information").css('color','yellow');
     }
 });

要让它同时适用于加载和调整大小，请将其移动到单独的函数中。使用此函数作为事件处理程序，并在页面加载时调用它。

DEMO

function size() {
   var mod = $(window).width();

   if(mod < 800){
        $(".information").css({"color":"green"});
     }
   else{    
        $(".information").css('color','yellow');
     }
}

$(window).on('resize', size);

size();