console.log显示错误无法读取属性样式的null

Question

console.log显示错误：无法读取属性＆＃39;样式＆＃39;为null 为什么要显示这个..？

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


    <script>

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

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


    </script>

代码也不行。

Answer 1

因为getElementById采用 id ，而不是CSS选择器。只丢失那些#：

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

querySelector和querySelectorAll使用CSS选择器，但getElementById完全按照名称建议：按ID获取元素。