0

第一：

function change(){
    document.getElementById("clr").style.backgroundColor="red";
    document.getElementById("test1").innerHTML="hwllo world";
}

第二个：

document.getElementById("test1").innerHTML="hwllo world";

第一个工作正常。但是第二个在加载文件时不起作用。

4

3 回答 3

2

Javascript 和 HTML 渲染按照它们在文件中的顺序执行。因此，如果您在呈现 HTML 元素之前执行一段 JS，那么 JS 代码将无法工作。

这将失败：

<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>
<div id="test1"></div>

这将按预期工作：

<div id="test1"></div>
<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>

或者，您可以使用各种 onload 和 dom 就绪事件来确保您的脚本在所有 HTML 被渲染后执行：

<script>
  window.onload = function(){
    document.getElementById("test1").innerHTML="hwllo world";
  }
</script>
<div id="test1"></div>
于 2013-05-29T07:11:03.923 回答
2

控制台中有什么错误？可能是您正在尝试设置不存在节点的 innerHTML 吗？如果要使用 div 进行操作，则必须在页面加载后进行，因此通常将其称为 body 事件 onLoad：

<script>
function init() {
  document.getElementById("test1").innerHTML="hello world";
}
</script>

<body onload="init();">
<div id="test1"></div>
...
于 2013-05-29T07:12:04.703 回答
1

正如 James Allardice 在他的评论中所说，代码可能在 DOM 准备好之前执行。您的代码可能会失败，因为该元素可能不存在。这是一个已知的问题，但也有一个已知的解决方案。最常用的解决方案可能是使用jQuery，它有一种简单的方法可以让函数仅在文档准备好后才执行。要使用此方法，首先您需要包含 jQuery 作为脚本引用，然后修改您的代码如下：

$(document).ready(function() {
    document.getElementById("clr").style.backgroundColor="red";
    document.getElementById("test1").innerHTML="hwllo world";
});

现在，如果您仍然使用 jQuery，您还可以重写代码以使用 jQuery 选择器并使其更紧凑：

$(document).ready(function() {
    $("#clr").css("backgroundColor", "red");
    $("#test1").html("hwllo world");
});

两段代码在功能上是等效的。

于 2013-05-29T07:09:03.100 回答