使用 javascript 更改导航栏的颜色

Question

HTML

   <nav>
    <ul>
        <li><a class="notDrop" href="#home">HOME</a></li>
        <li><a class="notDrop" href="guides.html">GUIDES</a></li>
        <li class="dropdown">
            <a class="dropbtn">BRANDS</a>
                    <div class="dropdown-content">
                    <a href="gaming.html">NVIDIA</a>
                    <a href="#">INTEL</a>
                    <a href="#">CORSAIR</a>
                    <a href="#">SAMSUNG</a>
            <li class="dropdown">
                <a class="dropbtn">BUILDS</a>
                    <div class="dropdown-content">
                    <a href="gaming.html">GAMING</a>
                    <a href="#">OFFICE</a>
                    <a href="#">SERVER</a>
                    <a href="#">MEDIACENTER</a>
                    </div>
            </li>
    </ul>
</nav>

CSS

    nav {
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

Javascript

    window.onload = function mobile(){
    if( isMobile.any() ) {
        document.getElementById('nav').style.backgroundColor = "blue";
       alert('Mobile'); 
    }
}

But I can't get it to change color, what am I doing wrong? I managed to change the color of the body but I cant of the nav.

Answer 1

您使用了错误的 javascript 函数。 nav 是标签，不是 id。

应该是getElementsByTagName("nav")[0]而不是getElementById("nav")

javascript 将始终 return 一个数组，而不管使用 getElementsByTagName() 方法的匹配元素的数量。所以用[0]到return第一个

Answer 2

您使用了 document.getElementById，但您只有来自 HTML5 的导航标签。添加 id = "nav" 到你的导航标签。

此致！

Answer 3

你的问题是你正在使用 getElementById，但没有给你的导航 ID。

解决这个问题的最佳方法是在您的导航中添加一个 id，如下所示：

<nav id="top-nav">

你的 js 变成：

document.getElementById('top-nav').style.backgroundColor = "blue";

Super Cool Handsome Gel Boy 给出的答案虽然有效但不切实际，因为它会查找任何 <nav> 标签，因此如果您添加更多 <nav> 标签，或移动它们，你将不得不重新编码你的 javascript。

通过使用 id，javascript 将始终定位到正确的 <nav>。

使用 javascript 更改导航栏的颜色

Change color of navbar using javascript

javascript

css

nav