jQuery：根据浏览器窗口分辨率动态添加类答案

【问题标题】：jQuery : Add class dynamically depending on the browser window resolutionjQuery：根据浏览器窗口分辨率动态添加类
【发布时间】：2011-06-15 15:10:50
【问题描述】：

你好朋友我正在尝试根据浏览器窗口分辨率动态添加一个类。这是我正在尝试使用的代码，但需要帮助调整它，因为我根本不了解 jQuery。

我想要实现的选项是：

一旦访问者来到我的网站，此代码必须检查他的浏览器窗口大小并按照以下规则将类添加到正文

如果窗口大小大于 1024px 但小于 1280px，则添加类.w1280。
如果窗口大小大于 1280px 但小于 1440px，则添加类.w1440。
如果窗口大小大于 1440px 但小于 1280px，则添加类.w1680。
如果窗口大小大于 1680px，则添加类.wLarge。

为此，我尝试使用以下脚本。我的问题是：

这是正确的代码吗？如果不是正确的代码是什么？
这是最好的最短的代码吗？如果不是，那么正确的代码是什么？

请帮助，因为我对 jQuery 的了解几乎为零。

function checkWindowSize() {  
    if ( $(window).width() > 1024) { 
        $('body').addClass('w1280');  
        } else {  
        $('body').removeClass('w1280');  
    } 
    if ( $(window).width() > 1280 ) { 
        $('body').addClass('w1440');  
        } else {  
        $('body').removeClass('w1440');  
    } 
    if ( $(window).width() > 1440) { 
        $('body').addClass('w1680');  
        } else {  
        $('body').removeClass('w1680');  
    } 
    if ( $(window).width() > 1600) { 
        $('body').addClass('wLarge');  
        } else {  
        $('body').removeClass('wLarge');  
    } 
}    
checkWindowSize()

【问题讨论】：

标签： jquery resize window addclass

【解决方案1】：

如果您没有在 body 元素上存储任何其他类，您可以这样做：

function checkWindowSize() {
    var width = $(window).width();
    document.body.className = width > 1600 ? 'wLarge' :
                              width > 1440 ? 'w1680' :
                              width > 1280 ? 'w1440' :
                              width > 1024 ? 'w1280' : '';
}

有些人可能会建议您使用 switch 声明来做到这一点，但是，有些人也喜欢吃他们的孩子。

这个函数每次被调用时都会覆盖body的类（默认情况下，如果浏览器小于/等于1024像素，则根本没有类），所以就像我说的那样它不起作用如果您的body 有其他需要维护的类。

编辑根据 Šime 的建议，这是一种更安全的方法：

function checkWindowSize() {
    var width = $(window).width(),
    new_class = width > 1600 ? 'wLarge' :
                width > 1440 ? 'w1680' :
                width > 1280 ? 'w1440' :
                width > 1024 ? 'w1280' : '';

    $(document.body).removeClass('wLarge w1680 w1440 w1280').addClass(new_class);
}

【讨论】：

@sdl 无需完全覆盖 className 属性。只需将字符串放入变量：var c = width ...，然后：c && $('body').addClass(c);
@Šime 但是，如果要多次调用此函数（例如，每当用户调整窗口大小时），最好摆脱旧的、不再相关的类.
@sdl OP 没有说他打算多次调用它。但不管怎样，您不想删除所有类，因为其他脚本可能会附加类名。这将是要走的路：$('body').removeClass('w1280 w1440 w1680 wLarge').addClass(c);
@Šime 你是对的；我忘了 jQuery 可以同时删除多个类。
那么@sdl 这是@sim 建议的正确语法吗？否则我可以要求@sim按照他的建议提供正确的语法吗？

【解决方案2】：

感谢 Naina 在此处的评论，这对我有用： https://www.quora.com/How-do-I-add-and-remove-CSS-classes-using-jQuery-based-on-the-screen-size

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        if($(window).width() < 768) {
           $("#myDiv").addClass("myClass");
           $("#otherDiv").removeClass("myClass");  
        }    
    });
</script>

【讨论】：