javascript - 如何使用 JS 将样式修改为 HTML 元素(使用 CSS 在外部设置样式)？

Question

所以当我点击 <p>家庭类(class)的标签，我想改变它颜色变为绿色，但它不起作用，我不知道为什么。点击注册罚款(因为 console.log("test") 显示得很好)但是更改颜色的其余功能将不起作用。这是我的 css、html 和 js 代码(js 代码包含在 HTML 中，所以它不是外部文件或任何东西):

function selectHome() {
  console.log("test");
  document.getElementsByClassName("home").style += "background-color: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;
}

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

Answer 1

其他人建议 .getElementsByClassName("home")[0] ，这是一个糟糕的想法。

首先，.getElementsByClassName()返回所有匹配元素的节点列表。如果您只对第一个感兴趣，那么找到那个然后继续扫描更多匹配项然后丢弃除找到的第一个以外的所有匹配项是没有意义的，这就是这段代码的作用。

第二，.getElementsByClassName()返回一个“实时”节点列表。这意味着每次您与列表交互时，都会再次搜索整个 DOM 以查找匹配项，以确保您在列表中设置的是最新的。这在动态添加和删除节点的应用程序中非常有用，但这些用例并不常见。

仅供引用:.getElementsByTagName() , .getElementsByName() , 和 node.childNodes还返回实时节点列表。

所有这些前面提到的方法都可以追溯到 DOM API 的最早时期，那时候还是网络开发的“狂野西部”时代。它们都有二十多年的历史，并且今天有更好的选择(即 .querySelector() 、 .querySelectorAll() 、 .closest() )。

当不需要更新列表时， .querySelectorAll() 是要走的路。坦率地说，即使您确实需要更新的节点列表，您仍然最好使用 .querySelectorAll()并在需要更新列表时再次手动运行它。

这是一个 good page讨论了这个，这是它必须说的:

How to Think About Live Object?

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

---

但是，在这种情况下，我们甚至不需要节点列表，我们只需要一个节点。正确的解决方案是:

document.querySelector(".home");

.querySelector() 扫描文档以查找与提供的选择器匹配的第一个元素，如果找到，则返回对该单个节点的引用。否则，它返回 undefined .