添加移除类在调整窗口使用jQuery

add remove class in resize window using jQuery

本文关键字：窗口 jQuery 调整 添加      更新时间：2023-09-26

我有这个jQuery代码为add remove类使用jQuery在调整窗口:

JS: 

$(function () {
    $(window).bind("resize", function () {
        console.log($(this).width())
        if ($(this).width() < 500) {
            $('div').removeClass('yellow').addClass('red')
        } else {
            $('div').removeClass('red').addClass('yellow')
        }
    })
})
HTML: 

<div style="width:300px; height:100px;" class="yellow"></div>

在实际操作中，这只在我手动调整窗口大小时起作用，但在默认情况下，如果设备窗口<这个功能不工作。>

如何解决这个问题?

Demo

使用trigger()在页面加载时运行函数

为给定的事件类型执行附加到匹配元素的所有处理程序和行为。

$(window).bind("resize", function () {
    console.log($(this).width())
    if ($(this).width() < 500) {
        $('div').removeClass('yellow').addClass('red')
    } else {
        $('div').removeClass('red').addClass('yellow')
    }
}).trigger('resize');

你也可以使用CSS media查询来设置页面加载时元素的样式属性。与使用Javascript相比，这样做的性能提升很小，用户体验更好。

@media (max-width: 500px) {
    div {
        color: red;
    }
}
@media (min-width: 500px) {
    div {
        color: yellow;
    }
}

尝试在DOM准备好后调用一次resize事件，

$(function(){
   $(window).bind("resize",function(){
    if($(this).width() <500){
      $('div').removeClass('yellow').addClass('red')
    }
    else{
      $('div').removeClass('red').addClass('yellow')
    }
   }).resize();
});
演示

Use media Query

使用下面的Css

.yellow{
background:yellow;
}
@media (max-width:500px) {
    .yellow {
    background:red;
    }
}

检查以下内容

http://jsfiddle.net/adxg3079/

如果有帮助请告诉我

相关文章：