Overriding bootstrap styles in Javascript

Question

this is somewhat of a continuation of my last question, as I'm trying to learn javascript by applying it to a website.

I've set up some JS to change the background color of an anchor element when the mouse hovers over it, this works pretty well but I wanted to take it a small step further. My goal is to invert the anchor element by making the background white, and the text dark. The issue at this point is that Bootstrap styles I've applied are overriding my JS, so I can't do anything. This is because the anchor elements already have a css hover style. I've researched this for a bit and the most progress I've made is to use the setAttribute method combined with !important. This, however is discouraged and isn't allowing me to invert both the background as well. What is the best practice here? The purpose of this question is to teach myself good practices in JS and how to solve this specific problem.

Here's my 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>

And Here's my 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")
    });
}

I do know that I can set the background and text color using element.style.color and element.style.background but I still can't override the existing bootstrap style using it.

All help is appreciated. Thanks for responding!

knetsi · Accepted Answer · 2018-01-23 22:39:14Z

1

I would suggest you to use CSS instead but you can achieve the thing you want with JS

here is a jsfiddle link with the code

you can add multiple styles by seperating them with ; (it is good practice to always use the ; character after every style line) so the code

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

would become

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

and then you can remove the style attribute, which will remove any styles you may have applied by changing the

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

to

this.removeAttribute("style")

answered Jan 23, 2018 at 22:39

knetsi

1,6211 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajan · Accepted Answer · 2018-01-23 22:35:01Z

1

I understand that you're trying to learn javascript. But the best practice on this case would be to use css :hover state to toggle the background and text color. Also, when you use style attribute that is inline CSS, !important is not necessary as it will override any CSS in your stylesheet.

answered Jan 23, 2018 at 22:35

Sajan

812 silver badges10 bronze badges

Collectives™ on Stack Overflow

Overriding bootstrap styles in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related