jQuery:根据浏览器窗口分辨率动态添加类 [英] jQuery : Add class dynamically depending on the browser window resolution

问题描述

你好，朋友，我想根据浏览器窗口的分辨率动态地将一个类添加到正文中.这是我尝试使用的代码，但由于我根本不了解jQuery，因此需要帮助进行调整.

Hello friends I am trying to add a class to body dynamically depending on the browser window resolution. Here is the code I am trying to use but need help tuning it as I dont know jQuery at all.

我要实现的选项是:

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

Once a visitor comes to my site, this code must check his browser windows size and add class to body as per the following rules

1. 如果窗口大小大于 1024像素但小于 1280像素，则添加类.w1280.

1. If window size is more than 1024px but less than 1280px then add class .w1280.

如果窗口大小大于 1280像素但小于 1440像素，则添加类.w1440.

If window size is more than 1280px but less than 1440px then add class .w1440.

如果窗口大小大于 1440px 但小于 1280px，则添加类.w1680.

If window size is more than 1440px but less than 1280px then add class .w1680.

如果窗口大小大于 1680px，则添加类.wLarge.

If window size is more than 1680px then add class .wLarge.

要实现此目的，我正在尝试使用以下脚本.我的问题是:

To achieve this, I am trying to use the following script. My questions are:

1. 这是正确的代码吗?如果不是，正确的代码是什么?

1. Is this the correct code? If not what is the correct code?

这是最好的最短代码吗?如果没有，正确的代码是什么?

Is this the best shortest possible code? If not what will be the correct code?

请帮忙，因为我对jQuery的了解几乎为零.

Kindly help as my knowledge of jQuery is almost ZERO.

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()

推荐答案

如果您没有在body元素上存储任何其他类，则可以执行以下操作:

If you aren't storing any other classes on the body element, you could do this:

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

有些人可能会建议您使用switch语句来做到这一点，但是，有些人也喜欢吃他们的年幼的食物.

Some people might advise you to do it with a switch statement, but then, some people also like to eat their young.

此函数将在每次调用body的类时覆盖它(默认值，如果浏览器小于/等于1024像素，则根本没有类)，所以就像我说的那样，它将不起作用如果您的body还有其他需要维护的类.

This function will overwrite the body's class every time it's called (the default, if the browser is smaller than/equal to 1024 pixels, is no class at all), so like I said it won't work if your body has other classes that need to be maintained.

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

EDIT Per Šime's suggestions, here's a safer way to do it:

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);
}

这篇关于jQuery:根据浏览器窗口分辨率动态添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！