0

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

如果@supports 查询计算结果为真，我正在尝试用 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));
    });
});
}
4

3 回答 3

3

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

于 2013-05-24T20:30:28.020 回答
2

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

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

于 2013-05-24T20:33:24.180 回答
1

页面仍在加载时，javascript 正在运行。当线路运行时，身体还没有机会加载，document.getElementsByTagName('body')[0]所以它返回undefined，因为没有找到任何东西。相反，您需要将代码移动到正文之后的文档底部，或者在页面加载 jQuery 后运行它$(document).ready(function() {/*MY CODE HERE */};

于 2013-05-24T20:39:45.393 回答