在给定特定宽度范围的情况下使用jquery更改类名（媒体查询）
我有以下要修改的html：
我想使用媒体查询，但我不想修改css，而是将类名从width8替换为width6。 以下标准媒体查询通常无法实现此目的：
@media only screen and (min-width: 1240px) and (max-width: 1484px) { }
我希望使用jquery删除类，并在窗口介于1240和1484px之间时添加一个类。 你可以帮助我使用jquery替代媒体查询来修改内联类和id名称吗？
这是我的jquery
$(document).ready(function() { $(window).resize(function(){ var width = $(window).width(); if(width >= 1240 && width = 1485 && width = 1789 && width = 2238 && width <= 3000){ $('#info').removeClass('col7').addClass('col6'); } else{ $('#info').removeClass('col8').addClass('col9'); } }) .resize(); });
你可以试试这个。
$(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.
看看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();
然后，您可以简单地为站点中的各个断点注册媒体查询，以便在成功匹配后添加和删除类。
你可以这样做：
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'); }