jQuery-根據clientWidth更改背景顏色
[英]jquery - chaning the background-color based on clientWidth
問題描述
我是jQuery的新手，我想讓我的頁面使用jQuery更改其背景顏色。問題是顏色僅在刷新頁面時更改，而在放大和縮小時不會更改。
$(document).ready(function(){ var ww = document.body.clientWidth; if(ww < 769){ $("body").css("background-color","yellow"); }else{ $("body").css("background-color","green"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> hgfhfhg </body>
3 個解決方案
解決方案1
1 2015-11-22 12:19:47
為此使用CSS媒體查詢：
body{
background-color: yellow;
}
@media (min-width: 769px){
/* Styles here are only applied when the width
of the window is more or equal to 769px */
body{
background-color: green;
}
}
解決方案2
0 2015-11-22 12:23:21
您的功能僅在頁面加載時檢查窗口大小。 它不會連續檢查。 如果您希望在調整大小時觸發一些操作，則可以使用以下命令：
$(window).on('resize', function(){
//do stuff
});
值得一提的是，調整大小事件（以及滾動事件）在發生這種情況時會多次觸發，最佳實踐是在其上放上一個稱為反跳器的東西。 但是，如果使用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'/>
現在調整大小后，背景應該會改變。
解決方案3
0 2015-11-22 12:32:24
為此使用“調整大小”方法。 DOM准備就緒后，將調用“ ready”方法。
$( window ).resize(function() {
var ww = document.body.clientWidth;
if(ww < 769){
$("body").css("background-color","orange");
}else{
$("body").css("background-color","green");
}
});
對所有基於background-color的元素使用jQuery過濾器
[英]Using jQuery filter on all elements based on background-color
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.