Javascript 用js更改css类

我想在窗口宽度小于768px时添加和删除css类。 我使用javascript实现了这一点：

$(window).ready(function() {
 var $width = $(window).width();
  if ($width <= 768){
   $('header').addClass('hide');
   $('#menu-switch').removeClass('hide');
 };
});

$（窗口）.ready（函数（）{
var$width=$（window.width（）；
如果（$widthJavaScript:

window.onresize = function(event) {
var $width = $(window).width();
  if ($width <= 768){
   $('header').addClass('hide');
   $('#menu-switch').removeClass('hide');
 };
};

window.onresize=函数（事件）{
var$width=$（window.width（）；
如果（$width，可以使用css实现更平滑的渲染，因为窗口大小调整侦听器对于性能较低的计算机用户来说非常繁重

试着这样想：

@media screen and (max-width: 767px) {
 header, #menu-switch {
   display: none;
 }
}

@media screen and (max-width: 768px) {
    header {
       display: none;
    }
    #menu-switch {
       display: block;
    }
}

@media screen and (min-width: 769px) {
    header {
       display: block;
    }
    #menu-switch {
       display: none;
    }
}

我们以前也用过同样的方法在调整大小时修复css。我们还添加了一些延迟，并触发了调整大小事件，我们自己也在文档准备就绪时触发了调整大小事件

setTimeout(function(){
  jQuery(window).trigger('resize');
}, 200);

尝试：


$（窗口）.bind（'load resize'，function（）{
var$width=$（window.width（）；
如果（$width您应该使用：

jQuery(window).resize(function(){
    var $width = $(window).width();
    if ($width <= 768){
        $('header').addClass('hide');
        $('#menu-switch').removeClass('hide');
    };
});

jQuery（窗口）.调整大小（函数（）{
var$width=$（window.width（）；
如果（$width，jQuery方式将是

$(window).on('resize', function() {
   if ($(window).width() <= 768){
      $('header').addClass('hide');
      $('#menu-switch').removeClass('hide');
   }
   else {
      $('#menu-switch').addClass('hide');
      $('header').removeClass('hide');
   }
});

您需要检查页面何时加载以及何时调整大小或滚动：

var changeMe = function(){
   var $width = $(document).width();
     if ($width <= 768){
      $('header').addClass('hide');
      $('#menu-switch').removeClass('hide');
    };
};
/* On ready */
$(document).ready(function(){changeMe();});
/* On resize */
$(window).resize(function(){changeMe();});
/* On scroll */
$(document).scroll(function(){changeMe();});

只需在主样式后添加CSS Switcher，并仅更改您需要的内容。
是的，它被称为
resize
事件！是的，使用
resize
事件。使用resize事件？这就是目的。这不正确，因为它在不断调整大小时非常沉重。请尝试CSS，看看下面我的答案。为什么要使用jQu除了将处理程序绑定到onresize事件之外，其他任何地方都可以使用jQuery吗？这可以说是使用jQuery的最佳机会，因为它可以避免覆盖现有的处理程序（或者在以后覆盖这个处理程序）因为jQuery只是包装了标准的resize DOM事件……以及我刚才提到的附加好处。你是对的，我认为两者完全相等。请注意，不鼓励使用
bind（events，callback（））
而支持
on（events，callback（））
。
var changeMe = function(){
   var $width = $(document).width();
     if ($width <= 768){
      $('header').addClass('hide');
      $('#menu-switch').removeClass('hide');
    };
};
/* On ready */
$(document).ready(function(){changeMe();});
/* On resize */
$(window).resize(function(){changeMe();});
/* On scroll */
$(document).scroll(function(){changeMe();});

@media screen and (max-width: 768px) {
    header {
       display: none;
    }
    #menu-switch {
       display: block;
    }
}