根據屏幕大小將類添加到html
[英]Add class to html depending on screen size
問題描述
當屏幕尺寸小於x像素數量時，如果HTML大於和小於x像素數量，則HTML應該獲得一個類，依此類推。
我正在使用jQuery 2.2.1。
的JavaScript
$(document).on('resize, ready', function() {
// Add class if screen size equals
var $window = $(window),
$html = $('html');
function resize() {
if ($window.width() < 768) {
return $html.addClass('xs');
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.addClass('sm');
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.addClass('md');
}
else if ($window.width() > 1200) {
return $html.addClass('lg');
}
$html.removeClass('xs sm md lg');
}
$window.resize(resize).trigger('resize');
});
問題是，在頁面加載時，它將獲得正確的類，而在調整瀏覽器的大小時，將添加正確的類，但是不會刪除舊的類。
http://jsbin.com/jusapucadi/edit?html,js，輸出
我正在使用這篇文章中的代碼： jQuery，當窗口寬度改變時添加/刪除類
4 個解決方案
解決方案1
2 已采納 2016-03-14 12:37:09
在刪除舊類之前，您返回的代碼無效。
像這樣更改它，方法是在設置新類之前刪除舊類。
$(document).on('resize, ready', function() {
// Add class if screen size equals
var $window = $(window),
$html = $('html');
function resize() {
$html.removeClass('xs sm md lg');
if ($window.width() < 768) {
return $html.addClass('xs');
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.addClass('sm');
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.addClass('md');
}
else if ($window.width() > 1200) {
return $html.addClass('lg');
}
}
$window.resize(resize).trigger('resize');
});
解決方案2
1 2016-03-14 12:37:12
我認為您應該在方法開始時刪除舊類，並像這樣刪除每個類：
function resize() {
$html.removeClass('xs sm md lg');
if ($window.width() < 768) {
return $html.addClass('xs');
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.addClass('sm');
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.addClass('md');
}
else if ($window.width() > 1200) {
return $html.addClass('lg');
}
}
或者您可以將class屬性設置為“”
$html.attr("class","");
解決方案3
1 2016-03-14 12:41:50
使用jquery .attr並自動從Jquery中刪除其他類
要將所有現有的類替換為另一個類，我們可以改用.attr（“ class”，“ newClass”）。
$(document).on('resize, ready', function() { // Add class if screen size equals var $window = $(window), $html = $('html'); function resize() { if ($window.width() < 768) { return $html.attr( "class","xs" ); } else if ($window.width() > 768 && $window.width() < 992) { return $html.attr( "class", "sm" ); } else if ($window.width() > 992 && $window.width() < 1200) { return $html.attr( "class", "md" ); } else if ($window.width() > 1200) { return $html.attr( "class", "lg" ); } } $window.resize(resize).trigger('resize'); });
.xs body { background:red; } .sm body { background:blue; } .md body { background:black; } .lg body { background:purple; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> </body> </html>
解決方案4
0 2016-03-14 12:42:20
/* cache object */
$html = $('html');
$(document).on('resize, ready', function() {
/* initially remove all existing classes */
$html.removeClass('xs sm md lg');
var width = $(window).width();
if (width < 768) {
return $html.addClass('xs');
}else if (width > 768 && width < 992) {
return $html.addClass('sm');
}else if (width > 992 && width < 1200) {
return $html.addClass('md');
}else{
return $html.addClass('lg');
}
});
為什么我的 HTML 元素會根據屏幕尺寸或縮放比例四處移動？
[英]Why are my HTML elements moving around depending on screen size or zoom?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.