jQuery多個else if語句

Question

我試圖基於窗口高度大小在div上設置填充。 我只是找不到更好的工作方式來將內容div垂直居中在尺寸未知的另一個div中。 我的代碼如下：

<script>
    $(document).ready(function(){ 
        var window_height = $(window).height();
        var home_content = $('#home-content');

            if(window_height <= 600) {
                home_content.css({"padding-top", "13px"});
            } else if(window_height > 600 && window_height <= 768) {
                home_content.css({"padding-top", "97px"});
            } else if(window_height > 768 && window_height <= 800) {
                home_content.css({"padding-top", "113px"});
            } else if(window_height > 800 && window_height <= 900) {
                home_content.css({"padding-top", "163px"});
            } else if(window_height > 900 && window_height <= 1050) {
                home_content.css({"padding-top", "238px"});
            } else if(window_height > 1050 && window_height <= 1080) {
                home_content.css({"padding-top", "253px"});
            } else if(window_height > 1080 && window_height <= 1200) {
                home_content.css({"padding-top", "313px"});
            } else {

            }
     });
    </script>

它不起作用。 我的網站卡在了預加載器上，根本無法加載任何內容。 有什么想法我做錯了嗎？

Answer 1

嘗試更改：

{"padding-top", "13px"}

至：

{"padding-top":"13px"}

等等...

注意

事實是，您可以通過兩種方式為jquery分配CSS樣式：

$("#element").css('padding', '30px');

（如果您要編輯/添加一種樣式設置），或：

$("#element").css({'padding':'30px'});

（用這種方法，你可以添加多少設置，只要你喜歡，只要他們分開, ，榮譽給@dollarvar指出這一點）。

在你的代碼的問題是，你有一個，而不是：

Answer 2

試試這個，您可以刪除{}並使用

 home_content.css("padding-top", "13px");

代替

home_content.css({"padding-top", "13px"});

Answer 3

作為替代JavaScript的替代方法，您可以使用CSS Media Queries來指定要應用的CSS規則（ 示例 ）。 它確實取決於您需要支持哪些瀏覽器， http://caniuse.com/css-mediaqueries 。

@media (max-height : 599px) {
    #home-content { padding-top: 13px; }
}

@media (min-height : 768px) {
    #home-content { padding-top: 97px; }
}

@media (min-height : 800px) {
    #home-content { padding-top: 113px; }
}

@media (min-height : 900px) {
    #home-content { padding-top: 163px; }
}

...

調整瀏覽器窗口大小時，這也會自動更改填充，這與自適應設計所使用的技術相同。

編輯：

但是，重新閱讀您的實際問題，似乎您正在嘗試將div在容器中垂直居中。 您真的不需要使用任何Javascript，就可以完全使用CSS來完成此操作，它會更加流暢： http : //coding.smashingmagazine.com/2013/08/09/absolute-horizo​​ntal-vertical-centering-css /

html, body {
  height: 100%; 
  margin: 0;
  padding: 0;
}

.container { 
  height: 100%; 
  position: relative;
}

#home-container { 
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: 1px solid red;
}

代碼筆示例