javascript - jQuery 和 HTML : Script works from console yet does not run from file or <script></script>

Question

我的网站有一个脚本，如果从移动设备查看页面，格式和样式会发生变化。在网站的 2/3 页上，该脚本效果很好，正如我想要的那样。但是在最后一个上，用于更改格式和样式的脚本运行但未完全运行。我已经尝试从我的 .html 文档末尾和开头的脚本标记运行代码，但没有任何变化。代码是:

<script>    
    if( jQuery.browser.mobile == true ) {
        alert(true);

        $("#siteHeader").css({
            "position": "absolute",
            "width": $(window).innerWidth + 10 + "px",
        });

        $("#mainContent").css({
            "top": "898px",
        });

        $("#queensTitle").css({
            "display": "none",
        });

        $("#pageTitle").css({
            "text-align": "left",
            "width": "100%",
        });

        $("#pageTitleText").css({
            "width": "93%",
            "margin-left": "20px",
        });

        $("#siteMenu").css({
            "padding-left": "0px",
            "padding-top": "7px",
            "height": "initial",
            "margin-top": "initial",
            "text-align": "center",
            "border-bottom": "28px solid #063e53",
        });

        $(".menuItems").css({
            "width": "100%",
            "height": "initial",
            "float": "initial",
            "margin": "auto",
            "font-size": "5em",
            "font-weight": "700",
            "padding": "0px",
        });

        $("body").width($("#siteMenu").width() - 15).css({
        });

        if ($(location).attr("pathname") == "/drama/about-us-template.html") {
            $("#aboutUsDesc").css({
                "font-size": "1.7em",
            });

            $("#backgroundImageAU").height(247 + $("#aboutUsTitleContainer").height() + $("#aboutUsDescContainer").height() + 21);
        };
    };
</script>

#siteHeader 格式已更改，#mainContent 已更改，但其他内容均未更改。但是，如果我通过控制台运行上面的代码或在运行页面时按 CTRL-F5，它就会按我想要的方式运行。这可能是什么问题？

(PS。我搜索了 stackoverflow 并发现了标题相似但场景完全不同的问题，我尝试了他们的解决方案但无济于事)

Here是我网站的链接。我正在使用 Google Chrome Developer Tools Device Emulation 和我自己的手机来测试移动 View 。

Answer 1

如果在任何时候 jQuery 的各个部分都没有在 DOM 中找到元素，那么它将抛出异常并且脚本将不再执行。

$("#queensTitle")  => undefined

然后调用

$("#queensTitle").css({ ... });

将导致脚本停止执行，此后不会执行任何其他内容。你真的应该在尝试设置 CSS 之前尝试检查元素

var elem = $("#queensTitle");
if ( elem ) {
   elem.css({ "display": "none" })
}

请注意，您不需要在语句末尾和结尾的“}”之间添加额外的“,”，因为某些浏览器会抛出异常，因为解析器需要额外的语句。

当您运行脚本时，浏览器控制台是否实际报告了任何错误或异常？