为什么“ document.getElementById（“＃sideNav”））找不到我的元素？ [英] Why does `document.getElementById("#sideNav")` not find my element?

问题描述

为什么此代码引发 TypeError ：无法读取<$ c的属性' style $ c> null ？

Why is this code throwing "TypeError: Cannot read property 'style' of null"?

function openNav() {
  document.getElementById("#sideNav").style.width = "250px";
}

function closeNav() {
  document.getElementById("#sideNav").style.width = "0";
}

<div class="sidenav" id="sideNav">
  <a href="javascript:void(0)" class="closenav" onclick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href="#">Listing</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>
<span onclick="openNav()">OPEN</span>
<div id="main">
  ...
</div>

推荐答案

因为 getElementById 需要一个 id ，而不是CSS选择器。只需在以下内容上丢失＃：

Because getElementById takes an id, not a CSS selector. Just lose the # on those:

document.getElementById("sideNav").style.width = "250px";
// No # here ------------^

querySelector 和 querySelectorAll 使用CSS选择器，但是 getElementById 可以顾名思义，就是：通过其ID获取元素。

querySelector and querySelectorAll take CSS selectors, but getElementById does exactly what the name suggests: Gets an element by its ID.

这篇关于为什么“ document.getElementById（“＃sideNav”））找不到我的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！