脚本标签放置有奇怪的结果？答案

【问题标题】：Script tag placement having weird outcomes?脚本标签放置有奇怪的结果？
【发布时间】：2020-05-24 12:20:33
【问题描述】：

脚本只有在“汉堡包”div 中才有效，我不知道为什么？如果我将它放在身体或头部，为什么它不起作用？另外，如果我将它导出到 .js 文件并将其 src 到 HTML 中，我将无法让它工作。请帮忙？这是我的第一个网站，我已经完全被这样一个简单的问题所困扰......

<!DOCTYPE html>
<html lang="it" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="styles.css" rel="stylesheet"/>
    <title>My Azienda Agricola</title>
  </head>

  <body>
    <header>
      <nav>
        <div class="hamburger">
          <script>
              let test=document.getElementsByClassName("hamburger");
              test[0].style.backgroundColor="blue";
          </script>
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
      </nav>
    </header>

  </body>
</html>

【问题讨论】：

标签： html dom tags

【解决方案1】：

使用document.querySelector() 而不是document.getElementsByClassName() 这是一种更先进的选择器方式，see here。除此之外，您的.hamburger 没有宽度或高度，如果其为 0px，则无法显示为蓝色。如您所见，我添加了 50px 的宽度和高度，并且出现了蓝色方块。我没有你的样式表。

这是您尝试做的一个工作示例：

<!DOCTYPE html>
<html lang="it" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>My Azienda Agricola</title>
    <style>
      .hamburger {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>

  <body>
    <header>
      <nav>
        <div class="hamburger">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
      </nav>
    </header>
    <script>
      let test = document.querySelector(".hamburger");
      test.style.backgroundColor = "blue";
    </script>
  </body>
</html>

您也可以在此处使用此示例： https://codesandbox.io/s/vigilant-resonance-yxpp9?file=/index.html

【讨论】：

【解决方案2】：

尽量将 script 标签放在 body 标签的末尾，因为它不会在 body 或 head 标签之外生效。请参阅here 了解更多信息。

【讨论】：

【解决方案3】：

我会这样做：

<!DOCTYPE html>
<html lang="it" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="styles.css" rel="stylesheet"/>
    <title>My Azienda Agricola</title>
  </head>

  <body>
    <header>
      <nav>
        <div class="hamburger">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
      </nav>
    </header>

  <script src="javascript.js"></script>

  </body>
</html>

然后创建您的 javascript.js 文件并在其中添加您的脚本。确保它与 .html 文件位于同一根文件夹中。如果你把它放在一个文件夹中，请确保你根据（例如 js/javascript.js）调整 src。

【讨论】：