使用jQuery在resize窗口中添加remove类

Question

我在调整大小窗口中add remove使用这个类的jQuery代码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>

在行动中,这只有在我手动调整窗口大小时才有用但是默认情况下如果设备窗口<500这个功能不起作用.

怎么解决这个问题？!

在这里演示

Answer 1

用于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');

演示

您还可以使用CSSmedia查询在页面加载时设置元素的样式属性.与使用Javascript相比,这将获得很少的性能提升和更好的用户体验.

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