Javascript 基于窗口宽度添加标题类

我想在断点窗口宽度小于1000px的情况下切换header类。但是当我将大的大小调整为小的时候，它可以正常工作，但反之亦然

以下是html的示例：

<header class="header-1">
  ........
</header>

---

因为您在恢复大小时未恢复状态。在其他条件下恢复状态：

jQuery(window).on('load resize', function(){
        var width = jQuery(window).width();
        var header = jQuery(document).find('header');
        var headerClass = header.attr('class');
        if(width < 1000){
            if( headerClass !== 'header-6' ){
                header.removeClass(headerClass);
                header.addClass('header-xs');
            }else{
                header.removeClass('header-xs').addClass(headerClass);
            }
        }else{
           // you have to restore the previous state here
        }
    });

jQuery（窗口）.on（'load resize'，function（））{
var width=jQuery（window）.width（）；
var header=jQuery（document.find（'header'）；
var headerClass=header.attr（'class'）；
如果（宽度<1000）{
如果（headerClass！=='header-6'）{
header.removeClass（headerClass）；
header.addClass（'header-xs'）；
}否则{
header.removeClass（'header-xs'）.addClass（headerClass）；
}
}否则{
//您必须在此处恢复以前的状态
}
});

尝试使用“container”div

---

此div中的元素将根据分辨率自动调整大小

是否有理由使用javascript而不是简单地使用CSS媒体查询？添加

else

以获得更大的宽度

jQuery(window).on('load resize', function(){
        var width = jQuery(window).width();
        var header = jQuery(document).find('header');
        var headerClass = header.attr('class');
        if(width < 1000){
            if( headerClass !== 'header-6' ){
                header.removeClass(headerClass);
                header.addClass('header-xs');
            }else{
                header.removeClass('header-xs').addClass(headerClass);
            }
        }else{
           // you have to restore the previous state here
        }
    });