Question

下面的代码工作正常。但是老师要我解释“ if（menu！== null）”，我无法解释。他说这是强制性的，但我删除了它，但仍然有效。这是主页的示例。

function setBold() {
  var menu = document.getElementById('page').getAttribute("data-page");
  if (menu !== null) {
    document.getElementById(menu).className = "active";
  }
}

.active {
  font-weight: bold;
  font-size: 18px;
}

<body onload="setBold()" id="page" data-page="Home">
  <div class="menu">
    <a id="Home" href="">Home</a>
    <a id="About" href="">About My Cakes</a>
    <a id="Find" href="">Find Maria's Coffe</a>
  </div>

  <body>

Answer 1

如果您的老师说if(menu!==null)是强制性的。
然后，代码稍后将使用 data-page 属性进行操作。（删除/添加）

假设如果 data-page 属性稍后会被删除，并且您没有if条件，document.getElementById(menu).className = "active";会导致错误，因为您尝试向空。

Answer 2

由于以下原因而添加了此if(menu!==null)条件：

在data-page中没有body的情况下。
脚本可能在渲染正文之前运行，如果我们不使用defer标签中的<script>属性，则会发生这种情况。

How exactly does <script defer="defer"> work?

使用javascript突出显示菜单中的当前页面

2 个答案: