Question

我正在学习包含段落的body元素上的onload和onresize事件的行为。 body元素中的段落没有出现，但是onload消息出现了。 onload事件是否会由于某种原因阻止显示段落？

我删除了body标记内的代码，并显示了该段落。我放回去，该段落不显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="style.css" />
    <script>
      function message(msg) {
        document.getElementById("output").innerHTML = msg + " EVENT";
      }
    </script>
  </head>
  <body id="output" onload="message('LOAD')" onresize="message('RESIZE')">
    <p>
      Hover over an image below to display here.
    </p>
  </body>
</html>

我希望onload和onresize消息显示在段落文本上方。

Answer 1

通过执行body.innerHTML = text，您将innerHTML（包括body标记内的所有内容）设置为仅文本形式……您将得到类似以下内容的东西：

<body>LOAD EVENT</body>

相反，您应该将该文本添加到现有内容中，例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="style.css" />
    <script>
      function message(msg) {
        var body = document.getElementById("output")
        body.innerHTML += msg + " EVENT";
      }
    </script>
  </head>
  <body id="output" onload="message('LOAD')" onresize="message('RESIZE')">
    <p>
      Hover over an image below to display here.
    </p>
  </body>
</html>

为什么段落不显示？

1 个答案: