Динамическая замена классов CSS при изменении ширины окна
Приветствую!
Пытаюсь в качестве тренировки-практики сделать следующее: при изменении ширины окна к тегу body динамично (в процессе) должны применяться различные классы CSS. Пока что там заданы разные цвета под различную ширину окна в пикселях. То, что я написал, работает, но пока лишь частично: если запустить браузер, предварительно уменьшив ширину окна до минимума, а потом тащить мышкой правую границу окна вправо, увеличивая тем самым его ширину. Исходя из результата, имею четыре вопроса: 1) Почему по умолчанию не применяется ни один из классов, хотя в условии else прописано, что если все прочие условия ложные, надо применить класс eight (серый бэкграунд)? 2) Почему если тянуть правую границу окна влево, уменьшая его ширину, никаких изменений не происходит? 3) Как грамотно оптимизировать код js? Его слишком много, по-моему. 4) Будет ли работать подобное решение на различных девайсах и платформах? Или проще вообще забить на JS и юзать для адаптивности @media запросы CSS? HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 1</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/screens.js" type="text/javascript"></script>
<style type="text/css">
.one{background-color: green;}
.two{background-color: red;}
.three{background-color: darkviolet;}
.four{background-color: chocolate;}
.five{background-color: blue;}
.six{background-color:darkolivegreen;}
.seven{background-color: black;}
.eight{background-color: grey;}
#txt{font-size: 60px; color: white; font-family: sans-serif;}
</style>
</head>
<body>
<h1 id = "txt"></h1>
</body>
</html>
JS (screens.js):
$(function() {
$(window).on('resize', function() {
var html = document.documentElement;
var x = html.clientWidth;
if (x > 480 && x <= 640) {
$('body').addClass('one');
$('#txt').html(x);
}
else if (x > 640 && x <= 768) {
$('body').addClass('two');
$('#txt').html(x);
}
else if (x > 768 && x <= 800) {
$('body').addClass('three');
$('#txt').html(x);
}
else if (x > 800 && x <= 960) {
$('body').addClass('four');
$('#txt').html(x);
}
else if (x > 960 && x <= 1024) {
$('body').addClass('five');
$('#txt').html(x);
}
else if (x > 1024 && x <= 1280) {
$('body').addClass('six');
$('#txt').html(x);
}
else if (x > 1280 && x <= 1920) {
$('body').addClass('seven');
$('#txt').html(x);
}
else {$('body').addClass('eight');}
});
});
P. S. В теге h1 всё работает как надо: туда динамически подставляется текущее значение ширины окна в пикселях. |
Цитата:
|
Цитата:
|
Благодарю.
|
Цитата:
но если очень хочется
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 1</title>
<style type="text/css">
.one{background-color: green;}
.two{background-color: red;}
.three{background-color: darkviolet;}
.four{background-color: chocolate;}
.five{background-color: blue;}
.six{background-color:darkolivegreen;}
.seven{background-color: black;}
.eight{background-color: grey;}
#txt{font-size: 60px; color: white; font-family: sans-serif;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var b = [0, 480, 640, 768, 800, 960, 1024, 1280, 1920];
$(window).on("resize", function() {
var c = document.documentElement.clientWidth,
d = 0;
b.every(function(a, b) {
return c > a ? (d = b, !0) : !1
});
var a = "eight one two three four five six seven eight";
$("body").removeClass(a).addClass(a=a.split(" ")[d]);
$("#txt").html(c + " " + a)
}).trigger("resize")
});
</script>
</head>
<body>
<h1 id="txt">1526</h1>
</body>
</html>
|
Блин, круто. Спасибо! :-)
|
| Часовой пояс GMT +3, время: 19:14. |