Привет, ребята, я столкнулся с некоторыми проблемами со следующим кодом. То, что я пытаюсь сделать, это изменить ширину div
через css
соответствии с шириной экрана.
<html>
<head>
<script src="../jquery/jquery.js" type="text/javascript"> // Add JQuery Code. </script>
</head>
<body>
<div id="something" style="background-color: black; width: 100px;">hello</div>
<script>
$(document).ready(function() {
if (screen.width = 1024) {
$(#something).css('width':'200px', 'background-color':'blue');
}
elseif (screen.width = 1366) {
$(#something).css('width':'300px', 'background-color':'blue');
}
}
</script>
</body>
У вас есть несколько проблем. Ширина должна быть проверена с диапазоном
$(document).ready(function() {
if ($(window).width() >= 1366) {
$('#something').css({ 'width':'300px', 'background-color':'blue' });
} else if ($(window).width() >= 1024) {
$('#something').css({ 'width':'200px', 'background-color':'blue' });
}
});
Редактировать: В сочетании с window.resize, я думаю, что он будет вести себя именно так, как вы хотите. Но вы также можете использовать css-медиа-запрос для достижения гибкой компоновки.
@media only screen and (min-width:1024px){
.my-style {
background-color: blue;
width: 200px;
}
}
@media only screen and (min-width:1366px){
.my-style {
background-color: blue;
width: 300px;
}
}
>=
имеет больше смысла. +1
Попытайтесь использовать событие resize
окна, кстати, вы назначаете значения внутри оператора if,
$(document).ready(function() {
$(window).resize(function(){
var something = $('#something');
if ($(this).width() >= 1366) {
something .css({'width':'200px', 'background-color':'blue'});
}
else if ($(this).width() >= 1024) {
something.css({'width':'300px', 'background-color':'blue'});
}
});
});
Примечание. В вашем коде много ошибок синтаксиса, например, передача неопределенного var в качестве селектора, ошибка с else, если и т.д., А также я получил нижний предел для этого.
screen.width == somevalue
условие неверноscreen.width == somevalue