jQuery窗口寬度不能按預期工作

如果瀏覽器的屏幕寬度小於'x'px，我正在創建一個響應式網站來實現Javascript函數。jQuery窗口寬度不能按預期工作

但是我所做的代碼似乎只工作，如果與窗口是真實的，當頁面最初加載，如果沒有瀏覽器在稍後例如調整

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$(function() { 
    if ($(window).width() < 500) { 
     $("#foo").css("background-color", "red"); 
    } 
}); 
</script> 
</head> 

<body> 
<div id="foo" style="height: 100px; background-color:blue;"></div> 
</body> 
</html>

在這個例子中的背景，如果瀏覽器是< 500像素，如果瀏覽器最初加載的內容在501px或多個背景色保持藍色。我希望能夠調整瀏覽器的大小並實時觸發Javascript。

任何意見表示讚賞。

來源

2014-03-07 Dan382

.resize()

$(function() { 
    $(window).resize(function() { //put your code in window.resize so that it runs when ever window is resized 
     if ($(window).width() < 500) { 
      $("#foo").css("background-color", "red"); 
     } 
    }).resize(); //call resize function 
});

來源

2014-03-07 14:00:29

阿偉大的東西。謝謝您的幫助。 – Dan382

@ Dan382歡迎很高興幫助。 –

jQuery窗口寬度不能按預期工作

回答

相關問題