问脚本标记放置会产生奇怪的结果吗？
EN

Stack Overflow用户

提问于 2020-05-24 12:20:33

回答 3查看 60关注 0票数 0

这个脚本只有在“汉堡包”目录下才能运行，我不知道为什么？如果我把它放在身体或头部，为什么它不起作用？此外，如果我将其导出为.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

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 3

Stack Overflow用户

发布于 2020-05-24 12:30:53

尝试将script标记放在body标记的末尾，因为它不会在body或head标记之外进行验证。有关详细信息，请参阅here。

票数 0

Stack Overflow用户

发布于 2020-05-24 12:32:48

使用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

票数 0

Stack Overflow用户

发布于 2020-05-24 12:44:11

我会这样做：

<!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>