javascript - 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 指出了这一点)。

您的代码中的问题是您有一个 , 而不是 :。