How to modify style to HTML elements (styled externally with CSS) using JS?

Question

so when i click on the

tag of the home class, i want it to change color to green but it doesn\'t work and idk why. the click registers fine (as the co

Answer 1

Others have suggested .getElementsByClassName("home")[0], which is a terrible idea.

First, .getElementsByClassName() returns a node list of all the matching elements. If you are only interested in the first one, it makes no sense to find that one and then keep scanning for more matches and then discard all but the first one found, which is what this code does.

Second, .getElementsByClassName() returns a "live" node list. This means that every time you interact with the list, the entire DOM is searched again for matches, ensuring that you have the most up to date set in your list. This can be useful in applications where nodes are being added and removed dynamically, but those use cases aren't as common.

FYI: .getElementsByTagName(), .getElementsByName(), and node.childNodes also return live node lists.

When it's not necessary to keep an up to date list, .querySelectorAll() is the way to go. And frankly, even if you do need an updated node list, you're still better off with .querySelectorAll() and just run it again manually at the point where you need an updated list.

Here's a good page that discusses this and here's what it has to say:

How to Think About Live Object?

Live object is not intuitive. You can think of it as delayed evaluation or lazy evaluation. Method or property of live object is re-computed when their result is accessed.

And here's a JSPerf to show the performance difference between a live and static node list.

---

But, in this case, we don't even want a node list, we just want a single node. The correct solution would be:

document.querySelector(".home");

.querySelector() scans the document for the first element that matches the supplied selector and, if found, returns a reference to that single node. Otherwise, it returns undefined.

Answer 2

.style is actually a js object with keys corresponding to css properties.

As Adarsh said

document.getElementsByClassName("home")[0].style.backgroundColor = "green"

Edit - Don't do this. As Scott Marcus explains, this is pretty bad. Definitely should use querySelector('.home') to get the element.

Generally, if a property has a hyphen like background-color, you convert it to camel case ie backroundColor

Check out MDN - HTMLElement.style

Answer 3

Do it like this:

function selectHome() {
  console.log("test");

  document.getElementsByClassName("home")[0].style.backgroundColor = "green";


}

.greyRect {
  height: 150px;
  width: 1350px;
  background-color: #D3D3D3;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

.home {
  box-sizing: border-box;
  width: 80px;
  height: 35px;
  line-height: 2;
  position: relative;
  left: 350;
  color: white;
}

.casinocraps {
  background-color: grey;
  box-sizing: border-box;
  width: 120px;
  height: 35px;
  text-align: center;
  line-height: 2;
  position: relative;
  left: 460;
  bottom: 50;
  color: white;
}

.tictactoe {
  background-color: grey;
  box-sizing: border-box;
  width: 90px;
  height: 35px;
  text-align: center;
  line-height: 2;
  position: relative;
  left: 600;
  bottom: 100;
  color: white;
}

.bingo {
  background-color: grey;
  box-sizing: border-box;
  width: 80px;
  height: 35px;
  text-align: center;
  line-height: 2;
  position: relative;
  left: 700;
  bottom: 150;
  color: white;
}

.concentration {
  background-color: grey;
  box-sizing: border-box;
  width: 100px;
  height: 35px;
  text-align: center;
  line-height: 2;
  position: relative;
  left: 800;
  bottom: 200;
  color: white;
}

footer {
  text-align: center;
  line-height: 4;
  position: relative;
  top: 125;
  right: 15;
  height: 70px;
  width: 1365px;
  background-color: #D3D3D3;
}

.border {
  height: 50px;
  width: 100px;
  border: 4px solid green;
  background-color: #555;
  position: relative;
  top: 20;
  left: 100;
}

.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
  position: relative;
  top: 50;
  left: 100;
}

<html>

<head>

  <meta charset="utf-8">

  <title></title>
  <link rel="stylesheet" type="text/css" href="cssForAss4.css">
</head>

<body>

  <header class="greyRect">
    <h1>Assignment 1</h1>

    <h2>Home Page</h2>
    <nav>
      <p class="home" onclick="selectHome()">
        Home
      </p>

  <p class="casinocraps">

    <b>Casino Craps</b>
  </p>
  <p class="tictactoe">

    <b>Tic-Tac-Toe</b>
  </p>
  <p class="bingo">

    <b>Bingo</b>
  </p>
  <p class="concentration">

    <b>Concentration</b>
  </p>
  </nav>
  <div class="border">
  </div>
  <footer>Footer</footer>

  </header>

</body>

</html>