Javascript 根据屏幕宽度使用Jquery修改CSS宽度_Javascript_Jquery_Html_Css

Javascript 根据屏幕宽度使用Jquery修改CSS宽度

javascript jquery html css

Javascript 根据屏幕宽度使用Jquery修改CSS宽度,javascript,jquery,html,css,Javascript,Jquery,Html,Css,嘿，伙计们，我在下面的代码中遇到了一些问题。我想做的是根据屏幕的宽度，通过css修改div的宽度 <html> <head> <script src="../jquery/jquery.js" type="text/javascript"> // Add JQuery Code. </script> </head> <body> <div id="something" style="background-

嘿，伙计们，我在下面的代码中遇到了一些问题。我想做的是根据屏幕的宽度，通过

css

修改

div

的宽度

<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>


//添加JQuery代码。
你好
$（文档）.ready（函数（）{
如果（screen.width=1024）{
css（'width'：'200px'，'backgroundcolor'：'blue'）；
}
elseif（screen.width=1366）{
css（'width'：'300px'，'background color'：'blue'）；
}
}

通过在if语句中赋值的方式，尝试使用窗口的

resize

事件

$(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 if等错误。我收到了对此的否决票。

您有一些问题。宽度应检查范围

$(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;
    }
}

你的条件是错误的

screen.width==somevalue

这里有什么问题？你想知道如何获得屏幕宽度吗？我的第一个问题是获得与范围相比较的宽度，然后我的第二个问题是将css修改为适当的定义。我希望这是有意义的。感谢所有的帮助，我终于解决了你的问题我的最后一个问题是，我在div命令中使用了name而不是id。我已经在上面进行了更新，以帮助其他可能阅读此命令的人。@fabriciomatté现在呢..？它仍然缺少对象的花括号，但我已经修复了它。我没有DV you btw，无论如何，为了努力+1。hmmmmm出于某种原因，它仍然对我不起作用。是的，

更有意义