Question

我是jQuery的新手，我正试图让我的页面用jQuery改变它的背景颜色。问题是颜色只有在我刷新页面时才会改变，并且不会在放大并缩小。

＆＃13;

$(document).ready(function(){
var ww = document.body.clientWidth;
if(ww < 769){

	$("body").css("background-color","yellow");

}else{
$("body").css("background-color","green");
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  hgfhfhg
</body>

＆＃13;

Answer 1

使用CSS媒体查询：

unsubscribeOn(Schedulers.io())

JSFiddle

Answer 2

您的功能仅检查页面加载窗口大小。它不会持续检查。如果您想在调整大小时触发某些内容，那么您可以使用它：

$(window).on('resize', function(){
    //do stuff
});

值得一提的是，调整大小事件（以及滚动事件）会多次触发，最佳做法是在其上放置一个名为debouncer的东西。但是，如果使用CSS媒体查询执行此操作，一切都会变得简单得多。在您的CSS中，您需要以下内容：

body{
      background-color:yellow;
}

@media screen and (max-width:769px){
   body{
      background-color:green;
   }
}

在HTML的标题中添加以下标记：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'/>

现在在调整大小时，背景应该会改变。

Answer 3

使用“resize”方法。一旦DOM准备就绪，就会调用“ready”方法。

$( window ).resize(function() {
  var ww = document.body.clientWidth;
if(ww < 769){

    $("body").css("background-color","orange");

}else{
$("body").css("background-color","green");
}
});

jquery - 基于clientWidth来处理背景颜色

3 个答案: