重写Javascript中的引导样式_Javascript_Html_Css_Bootstrap 4

重写Javascript中的引导样式

javascript html css bootstrap-4

重写Javascript中的引导样式,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,这是我上一个问题的延续，因为我正试图通过将javascript应用到一个网站来学习它我已经设置了一些JS来更改鼠标悬停在锚元素上时锚元素的背景颜色，这很好，但我想再进一步。我的目标是通过使背景变白，文本变暗来反转锚元素。现在的问题是，我应用的引导风格覆盖了我的JS，所以我什么都做不了。这是因为锚元素已经有了css悬停样式。我已经对此进行了一些研究，我取得的最大进步是使用setAttribute方法与！重要的。然而，这是令人沮丧的，不允许我同时反转背景。这里的最佳实践是什么？这个问题的目的是教我

这是我上一个问题的延续，因为我正试图通过将javascript应用到一个网站来学习它

我已经设置了一些JS来更改鼠标悬停在锚元素上时锚元素的背景颜色，这很好，但我想再进一步。我的目标是通过使背景变白，文本变暗来反转锚元素。现在的问题是，我应用的引导风格覆盖了我的JS，所以我什么都做不了。这是因为锚元素已经有了css悬停样式。我已经对此进行了一些研究，我取得的最大进步是使用setAttribute方法与！重要的。然而，这是令人沮丧的，不允许我同时反转背景。这里的最佳实践是什么？这个问题的目的是教我自己在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")
    });
}

var coll=document.getElementsByClassName（“导航链接”）；
//迭代所有元素
对于（变量i=0；i


我知道我可以使用元素.style.color和元素.style.background设置背景和文本颜色，但我仍然无法使用它覆盖现有的引导样式
感谢所有的帮助。感谢您的回复
 我知道您正在尝试学习javascript。但是这种情况下的最佳实践是使用css：hover
状态切换背景和文本颜色。另外，当您使用内联CSS的样式属性时，！重要信息
不是必需的，因为它将覆盖样式表中的任何CSS。
我知道您正在尝试学习javascript。但是这种情况下的最佳实践是使用css：hover
状态切换背景和文本颜色。另外，当您使用内联CSS的样式属性时，！重要信息
不是必需的，因为它将覆盖样式表中的任何CSS。
我建议您使用CSS，但您可以通过JS实现您想要的功能
下面是一个带有代码的示例
您可以通过使用分隔多个样式来添加它们（最好在每个样式行后始终使用；字符）
那么代码呢
this.setAttribute（“样式”，“颜色：红色！重要”）

将成为
this.setAttribute（“样式”，“颜色：红色！重要；背景色：白色；”

然后可以删除“样式”属性，该属性将删除通过更改
this.setAttribute（“样式”、“颜色：！重要”）

到
this.removeAttribute（“style”）
我建议您改用CSS，但您可以通过JS实现您想要的功能
下面是一个带有代码的示例
您可以通过使用分隔多个样式来添加它们（最好在每个样式行后始终使用；字符）
那么代码呢
this.setAttribute（“样式”，“颜色：红色！重要”）

将成为
this.setAttribute（“样式”，“颜色：红色！重要；背景色：白色；”

然后可以删除“样式”属性，该属性将删除通过更改
this.setAttribute（“样式”、“颜色：！重要”）

到
this.removeAttribute（“style”）
当应用于此问题时，您是正确的，感谢您的回答！当你回答这个问题时，你是正确的，谢谢你的回答！