Question

如何在myFunction()中添加head，该操作仅在加载body之后运行。我希望将其包含在head中的原因是因为这样，我可以将其放置在一个文件中，而不是多个文件中。

目前，我有<body onload="myFunction()"></body>可以正常工作。但这需要添加到多个文件中。

示例

<head>
  <style>
    .codetext {
      font-family: monospace;
    }
  </style>

  <script>
    myFunction = function () {
      let links = document.querySelectorAll("a");
      links.forEach(elem => elem.classList.add("codetext"));
    }
	document.body.onload("myFunction"); <!--Doesn't Work-->
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

Answer 1

您可以使用全局load事件

<script>
  onload = _ => 
    document.querySelectorAll("a").forEach(elem => elem.classList.add("codetext"))
</script>

Answer 2

使用document.body.onload = handler。参见this answer for more details。

<head>
  <style>
    .codetext {
      font-family: monospace;
    }
  </style>

  <script>
    document.body.onload = () => {
      const links = document.querySelectorAll('a');
      links.forEach(elem => elem.classList.add('codetext'));
    }
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

或者您可以使用window.onload = handler。

Answer 3

您可以使用

 document.querySelector('body').onload

<head>
  <style>
    .codetext {
      font-family: monospace;
    }
  </style>

  <script>
    document.querySelector('body').onload= function myFunction() {
      let links = document.querySelectorAll("a");
      links.forEach(elem => elem.classList.add("codetext"));
    }
	//document.body.onload("myFunction"); <!--Doesn't Work-->
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

Answer 4

TypeError：document.body.onload不是函数

您需要将功能分配给onload：document.body.onload = myFunction;

<head>
  <style>
    .codetext {
      font-family: monospace;
      color: red;
    }
  </style>

  <script>
    myFunction = function() {
      let links = document.querySelectorAll("a");
      links.forEach(elem => elem.classList.add("codetext"));
    }
    document.body.onload = myFunction;
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

Answer 5

使用

document.body.addEventListener("load",functionToAssingn)

添加onLoad事件：

<head>
  <style>
    .codetext {
      font-family: monospace;
    }
  </style>

  <script>document.body.addEventListener("load",myFunction)
    myFunction = function () {
      let links = document.querySelectorAll("a");
      links.forEach(elem => elem.classList.add("codetext"));
    }
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

将脚本添加到加载身体后运行的头部

5 个答案: