Question

我试图学习如何使用javascript进行编程，来自对Java，HTML和CSS非常扎实的知识。我使用bootstrap设计了一个网站，但我已经卡住了。我的目标是使用普通Javascript

更改导航栏元素的背景颜色

我可以使用JQuery做到这一点，但我需要知道如何在javascript中编程，因为它有助于作为一种技能（特别是对于实习！）。研究完之后，我可以看到的实现是HTML元素的鼠标悬停属性和getElementsByClassName / getElementsById。

当我自己实施它们时，我似乎没有任何运气。我想将我的Javascript保存在外部文件中，这是另一个难点。我似乎无法一次性选择所有元素，更不用说为它们设置样式了。

这是我的html（使用bootstrap 4和一些自定义样式）：

<!DOCTYPE = html>
<html lang = "en">
  <head>
    <title>Testing Styles</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Quicksand|Rubik" rel="stylesheet">
  </head>
  <body>
    <heading>
      <div class = "Jumbotron">
        <h1 class = "display-2">The Header</h1>
        <p class = "lead subtext"> And Subtext about the header</p>
      </div>
    </heading>
    <nav class = "mx-auto bg-dark">
      <div class = "container-fluid">
        <ul class = "nav justify-content-center">
          <li class = "nav-item active" id = "temp">
            <a class = "nav-link text-light" href="#">Homepage</a>
          </li>
          <li class = "nav-item active" id = "temp">
            <a class = "nav-link text-light" href="#">Posts</a>
          </li>
          <li class = "nav-item active" id = "temp">
            <a class = "nav-link text-light" href="#">Report A Problem</a>
          </li>
        </ul>
      </div>
    </nav>
    <script src= "JS/scripts.js"></script>

  </body>
</html>

使用Javascript：

document.getElementsByClassName("nav-link").style.color = "blue";

将颜色设置为蓝色仅测试选择是否有效，而不是我的最终目标。当我刷新页面时没有任何反应。我已经确认我正确链接了我的JS文件，因为alert（）有效。

任何帮助表示赞赏，我已经在这个问题上付出了很多努力，所以请不要恭维！谢谢！

Answer 1

你几乎就在那里......你所拥有的是集合来循环......

var N=document.getElementsByClassName("nav-link");

for(var i=0; i<N.length; i++){ N[i].style.color = "blue"; }

Answer 2

你需要遍历一系列元素。

＆＃13;

var links = document.getElementsByClassName('nav-link');
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('mouseover', function() {
    this.style.color = "blue";
  });

  links[i].addEventListener("mouseout", function () {       
      this.style.color = "";
  });
}

＆＃13;

<link href="https://cdn.jsdelivr.net/npm/bootstrap-grid@2.0.1/dist/grid.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<heading>
  <div class="Jumbotron">
    <h1 class="display-2">The Header</h1>
    <p class="lead subtext"> And Subtext about the header</p>
  </div>
</heading>
<nav class="mx-auto bg-dark">
  <div class="container-fluid">
    <ul class="nav justify-content-center">
      <li class="nav-item active" id="temp">
        <a class="nav-link text-light" href="#">Homepage</a>
      </li>
      <li class="nav-item active" id="temp">
        <a class="nav-link text-light" href="#">Posts</a>
      </li>
      <li class="nav-item active" id="temp">
        <a class="nav-link text-light" href="#">Report A Problem</a>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

Answer 3

清理@ user4723924解决方案并提供一种在鼠标离开控件时更改颜色的方法。

if (neoncircle2.contains(x, y)) {
      //do that and this
}

// Get all the nav-link elements.
var navButtons = document.getElementsByClassName("nav-link");

for (var i=0; i < navButtons.length; i++) { 
    // On mouse over.
    navButtons[i].addEventListener("mouseover", function () {
        // Change color to red.
        this.style.color = "red";
    });
    // On mouse out.
    navButtons[i].addEventListener("mouseout", function () {
      // Change back to original color.
      this.style.color = "";
    });
}

Answer 4

我个人更喜欢.querySelectorAll('selector')，因为它可以更灵活地选择元素循环遍历它们的方法（选择）是[].map.call(collection, function)。

它灵活，不太冗长，高度可读，因此可维护。我不确定它在向后浏览器兼容性方面有多远，但它确实涵盖了现代IE，推荐的方法NodeList.forEach()尚未实现。

＆＃13;

[].map.call(document.querySelectorAll('.nav-link'), function(el){
  el.addEventListener('mouseover', function(){
    el.setAttribute('data-color',el.style.color);
    el.style.color='red'
  });
  el.addEventListener('mouseout', function(){
    el.style.color=el.getAttribute('data-color');
    el.removeAttribute('data-color')
  });
})

＆＃13;

<ul>
  <li><a href class="nav-link">a link</a></li>
  <li><a href class="nav-link" style="color:blue">a link</a></li>
  <li><a href class="nav-link" style="color:orange">a link</a></li>
</ul>

＆＃13;

在Javascript中实现鼠标悬停功能

4 个答案: