Question

我将我的代码复制到JS Fiddle，它开始正常工作。没有错误。

如果@supports查询的计算结果为true，我试图用unicode符号替换某些单词。我如何检查它是否计算为true是通过检查是否已经应用了它可以写的样式。

我得到的错误是

Uncaught TypeError: Cannot read property 'style' of undefined

但是当我在JS Fiddle中使用相同资产的确切代码时，我没有错误。

以下是JS Fiddle的链接：http://jsfiddle.net/VJm6r/

以下是代码：

if(document.getElementsByTagName('body')[0].style.zIndex === 0){
//ligatures and @supports supported
}
else{
   //ligatures and @supports not supported
    $(document).ready(function(){
    var map = {
        "About": { regex: /About/g, replacement: "&#xe00f" },
        "Work": { regex: /Work/g, replacement: "&#xe010" },
        "CV": { regex: /CV/g, replacement: "&#xe00c" },
        "Resume": { regex: /Resume/g, replacement: "&#xe00e" },
        "down": { regex: /down/g, replacement: "&#xe00d" },
        "Mail": { regex: /Mail/g, replacement: "&#xe011" },
        "Dribbble": { regex: /Dribbble/g, replacement: "&#xe015" },
        "Facebook": { regex: /Facebook/g, replacement: "&#xe013" },
        "GooglePlus": { regex: /GooglePlus/g, replacement: "&#xe012" },
        "Twitter": { regex: /Twitter/g, replacement: "&#xe014" }
    }
    $('.nav a').each(function () {
        var obj = $(this);
        var html = $(this).html();
        obj.html(html.replace(map[html].regex, map[html].replacement));
    });
});
}

Answer 1

如果您的代码位于<head>，document.getElementsByTagName('body')[0]将返回undefined，因为尚未解析正文。建议的修复：将整个脚本移动到正文的末尾（在</body>之前）。

Answer 2

您需要等到创建body元素之后。 getElementsByTagName("body")正在返回一个空的HTML集合。 [0]返回undefined，没有style属性。您可以将所有内容包装在$(document).ready中，也可以将其移到页面底部。严格来说，您可以在<body>标记之后移动它，但前两个选项中的一个是更常见的做法。

你的jsFiddle将所有内容包装在$(window).load中，这就是它在那里工作的原因。

Answer 3

当页面仍在加载时，javascript正在运行。当行document.getElementsByTagName('body')[0]运行时，正文尚未有机会加载，因此返回undefined因为没有找到任何内容。您需要将代码移动到正文后面的文档底部，或者在页面加载了jQuery后运行它$(document).ready(function() {/*MY CODE HERE */};

代码在JSFiddle中隔离时工作，但在站点时出错

3 个答案: