在给定特定宽度范围的情况下，使用 jquery 更改类名（媒体查询）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8943816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing a class name with jquery given a specific width range (media query)
提问by JCHASE11
I have the following html that I am trying to modify:
我有以下 html，我正在尝试修改：
<div class="col1 width8"><img src="images/entity.jpg"></div>
I want to use media queries, but I do not want to modify the css, but rather replace the class name from width8 to width6. This is not typically possible with the standard media query below:
我想使用媒体查询，但我不想修改css，而是将类名从width8替换为width6。这对于下面的标准媒体查询通常是不可能的：
@media only screen and (min-width: 1240px) and (max-width: 1484px) { }
I wish to use jquery to remove the class and add a class when the window is between 1240 and 1484px wide. Can you assist me with the jquery alternative to media queries for modifying inline class and id names?
当窗口宽度在 1240 到 1484px 之间时，我希望使用 jquery 删除类并添加一个类。你能帮我用 jquery 替代媒体查询来修改内联类和 id 名称吗？
Here is my jquery
这是我的 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();
});
回答by ShankarSangoli
You can try this.
你可以试试这个。
$(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.
回答by 67hz
Take a look at enquire.js
It is a no dependency library that allows you to respond to media queries with JavaScript.
它是一个无依赖库，允许您使用 JavaScript 响应媒体查询。
For example:
例如：
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();
Then you can simply register media queries for the various breakpoints in your site so classes will be added and removed upon successful match.
然后，您可以简单地为站点中的各种断点注册媒体查询，以便在成功匹配后添加和删除类。
回答by techfoobar
You can do something like:
您可以执行以下操作：
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');
}
