Question

这有点是我上一个问题的延续，因为我正在尝试通过将其应用到网站来学习javascript。

我已经设置了一些JS来改变鼠标悬停在它上面时锚元素的背景颜色，这很好用，但我想更进一步。我的目标是通过使背景变白并且文本变暗来反转锚元素。此时的问题是我应用的Bootstrap样式覆盖了我的JS，所以我什么也做不了。这是因为锚元素已经具有css悬停样式。我已经对此进行了一些研究，我所取得的最大进步是将setAttribute方法与！important结合使用。然而，这是不鼓励的，也不允许我反转背景。这里的最佳做法是什么？这个问题的目的是教自己JS中的良好实践以及如何解决这个特定问题。

这是我的HTML

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

      <footer class = "jumbotron">
        <div id = "footer" class = "align-middle">
          <h3 class = "display-5 justify-content-start align-middle"> A footer label &copy; me</h3>
          <nav class = "d-flex justify-content-end align-middle">
            <ul class = "pagination">
              <li class = "page-item">
                <a class = "nav-link text-light" href="#">Homepage</a>
              </li>
              <li class = "page-item">
                <a class = "nav-link text-light" href="#">Posts</a>
              </li>
              <li class = "page-item">
                <a class = "nav-link text-light" href="#">Report A problem</a>
              </li>
            </ul>
          </div>
        </nav>
      </footer>
    </body>
    <script src= "JS/scripts.js"></script>
  </html>

这是我的JS

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

//iterate on all elements
for (var i=0; i < coll.length; i++) {
    //mousein
    coll[i].addEventListener("mouseover", function () {
        // Change color to red.
        this.setAttribute("style","color:red !important")
    });
    //mouseout
    coll[i].addEventListener("mouseout", function () {
      // Change back to original color.
      this.setAttribute("style","color: !important")
    });
}

我知道我可以使用 element.style.color 和 element.style.background 设置背景和文字颜色，但我仍然无法覆盖现有的使用它的bootstrap样式。

感谢所有帮助。谢谢你的回复！

Answer 1

我知道您正在尝试学习javascript。但这种情况下的最佳做法是使用css :hover状态来切换背景和文本颜色。此外，当您使用内联CSS的样式属性时，!important不是必需的，因为它将覆盖样式表中的任何CSS。

Answer 2

我建议你改用CSS，但是你可以用JS实现你想要的东西

这是一个代码为

的jsfiddle link

你可以通过用;分隔多个样式来添加它们（最好在每个样式行后使用;字符）所以代码

this.setAttribute("style","color:red !important")

会变成

this.setAttribute("style","color:red !important;background-color:white;")

然后你可以删除style属性，它将删除你可能通过更改

应用的任何样式

this.setAttribute("style","color: !important")

到

this.removeAttribute("style")

在Javascript中覆盖引导程序样式

2 个答案: