Question

我希望根据测试显示或不显示某些文本。我已将文本放在＆lt; span /id=" ...。＆＃34;＆gt ;;阻止，并找到了直接引用id的示例（如果......，然后在下面）或使用document.getElementById函数（...下面的其他内容）。

两者似乎都适用于我的测试用例。我认为使用getElementById函数是正确的。在没有调用该函数的情况下引用也是正确的，或者这只是它现在在这个浏览器中工作的情况，但是可能会使用不同的浏览器或浏览器版本中断？

有没有更好的方法可以做到这一点？

<span id="myText">Some text to display or hide</span>

<script type="text/javascript">
function SetVisibility()
{
  if (button.checked)
    {
      myText.style.visibility="visible";
    }
  else
    {
      document.getElementById("myText").style.visibility="hidden";
    }
}

Answer 1

根据此answer，使用内联 HTML 事件属性是一个坏主意。

您还可以使用 getElementById 添加事件侦听器，然后将 addEventListener() 添加到您的 button 元素，如下所示：

document.getElementById("myButton").addEventListener("click", function() {
  var myText = document.getElementById("myText");
  myText.style.visibility = myText.style.visibility === "hidden" ? "visible" : "hidden";
})

<span id="myText">Some text to display or hide</span>
<button id="myButton">SetVisible</button>

最好使用 eventListener() 来设置事件处理程序。

Answer 2

正如评论中提到的，对此的支持似乎非常普遍——它始于 IE，并且在我刚刚测试时似乎可以在 Chrome/Firefox/Safari 上运行。但是，在有意义的特殊情况之外，使用全局变量通常被认为是一种反模式——例如，本机 Web API 或需要能够全局访问某些内容的情况。否则，您将面临覆盖或被其他试图争夺这些名称的代码覆盖的风险。简而言之——在这种情况下，使用 getElementById 几乎总是更好，尽管知道此功能存在很好。

使用Javascript通过ID进行适当的对象引用

2 个答案: