在给定特定宽度范围的情况下使用 jquery 更改类名（媒体查询）

Posted 2023-03-06

【中文标题】在给定特定宽度范围的情况下使用 jquery 更改类名（媒体查询）

【英文标题】：Changing a class name with jquery given a specific width range (media query)

【发布时间】：2012-02-15 03:51:09

【问题描述】：

我有以下要修改的 html：

<div class="col1 width8"><img src="images/entity.jpg"></div>

我想使用媒体查询，但我不想修改css，而是将类名从width8替换为width6。下面的标准媒体查询通常无法做到这一点：

@media only screen and (min-width: 1240px) and (max-width: 1484px)  

我希望在窗口宽度介于 1240 到 1484 像素之间时使用 jquery 删除类并添加一个类。你能帮我用 jquery 替代媒体查询来修改内联类和 id 名称吗？

这是我的 jquery

 $(document).ready(function()  
    $(window).resize(function()
            var width = $(window).width();

            if(width >= 1240 && width <= 1484)
                $('#info').removeClass('col9').addClass('col8');
            
            else if(width >= 1485 && width <= 1788)
                $('#info').removeClass('col8').addClass('col7');
            

            else if(width >= 1789 && width <= 2237)
                $('#info').removeClass('col7').addClass('col6');
            

            else if(width >= 2238 && width <= 3000)
                $('#info').removeClass('col7').addClass('col6');
            
            else
                $('#info').removeClass('col8').addClass('col9');
             
            )

.resize();

    );

【参考方案1】：

你可以试试这个。

$(window).resize(function()
   console.log('resize called');
   var width = $(window).width();
   if(width >= 700 && width <= 900)
       $('#myelement').removeClass('width8').addClass('width6');
   
   else
       $('#myelement').removeClass('width6').addClass('width8');
   
)
.resize();//trigger the resize event on page load.

【讨论】：

这很好，但它只适用于调整窗口大小。如何使它在窗口调整大小和页面加载时都起作用

@JCHASE11 - 它也适用于页面加载，因为我在页面加载时触发了resize 事件。我现在做了一些修改检查我编辑的答案。

仍然无法正常工作。我在上面添加了我的确切 jquery 代码。请让我知道有什么问题。当我调整窗口大小时效果很好，但不是在加载时。

我添加了一个控制台消息检查，如果您在页面加载时看到它而不调整窗口大小。

不，没有隐藏。控制台仅在调整窗口大小时登录调整大小，而不是在页面加载时

【参考方案2】：

看看enquire.js

它是一个无依赖库，允许您使用 javascript 响应媒体查询。

例如：

var $info = $('#info');

enquire.register("screen and (min-width: 1240px) and (max-width: 1484px)", 
    match: function() 
        $info.addClass('col8');
    ,

    unmatch: function() 
        $info.removeClass('col8');
    
).listen();

然后，您可以简单地为站点中的各种断点注册媒体查询，以便在成功匹配时添加和删除类。

【参考方案3】：

你可以这样做：

var x = $('#myelement'); // this is your element
var w = $(window).width();
if(w >= 700 && w <= 900) 
    x.removeClass('class-to-remove').addClass('class-to-add');