javascript - 使用 jQuery 在调整大小窗口中添加删除类

Question

我有这个 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>

实际上，这仅在我手动调整窗口大小时有效，但默认情况下，如果设备窗口 < 500，则此功能无效。

如何解决这个问题？!

演示 HERE

Answer 1

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

Execute all handlers and behaviors attached to the matched elements for the given event type.

$(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');

Demo

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

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