Question

我的代码非常简单

HTML

<div id="ball" class="ball"></div>

CSS

#ball{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #0f0;
    position: absolute;
    bottom: 150px;
    left: 350px;
}

的javascript

<script type="text/javascript">
    document.getElementById('ball').style.backgroundColor="red";
</script>

我在jsfiddle中尝试了这个代码并且它可以工作，但为什么这不能在本地工作？我试过改变，但我不知道为什么这不起作用。它显示错误：

TypeError：document.getElementById（...）为null

Answer 1

如评论中所述，您的初始化顺序搞砸了。您可以use window.onload来修复它：

<script type="text/javascript">
    window.onload = function() {
        document.getElementById('ball').style.backgroundColor="red";
    };
</script>

另请注意，您只能拥有一个onload触发器功能。 Here are some ideas关于如何支持多个触发器功能。最简单的当然是使用JQuery's ready function。

另一种方法是将＆lt; script＆gt;放入在依赖的DOM元素之后标记到正文中。出于性能原因，通常会鼓励这样做，但它往往会降低可读性。

为什么＆lt; script＆gt;的原因头部中的标签按顺序执行（而不是在DOM加载之后延迟执行）是：性能。例如，有时您可能希望在文档加载完成之前启动异步请求。如果您不关心性能，那么执行它们“onload”会更安全。

最终，在放置＆lt; script＆gt;时需要考虑很多因素。标签。如果您想了解更多信息，this可能是一个很好的起点。

关于问题的第二部分：为什么它在JSFiddle中工作的原因是，默认情况下，它执行脚本onload。你可以通过选择“no wrap-in head”来重现JSfiddle上的错误：http://jsfiddle.net/aDuwg/。

javascript不在本地工作，但在jsfiddle工作

1 个答案: