如何使用 JS 将样式修改为 HTML 元素（使用 CSS 外部样式）？

Question

因此，当我单击家庭类的<p>标记时，我希望它将颜色更改为绿色，但它不起作用，我知道为什么。 点击注册很好（因为 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 的早期，当时它仍然是 Web 开发的“狂野西部”时代。 它们都有二十多年的历史，并且今天有更好的选择（即.querySelector() 、 .querySelectorAll() 、 .closest() ）。

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

这是一个讨论这个的好页面，这就是它要说的：

如何考虑活体？

活体不直观。 您可以将其视为延迟评估或惰性评估。 访问结果时重新计算活动对象的方法或属性。

---

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

document.querySelector(".home");

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

Answer 2

像这样做：

JS：

function selectHome() {
  document.getElementsByClassName("home")[0].style.backgroundColor = "green";
}

HTML：

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

Answer 3

.style 实际上是一个 js 对象，其键对应于 css 属性。

正如阿达什所说

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

编辑- 不要这样做。 正如斯科特马库斯解释的那样，这非常糟糕。 绝对应该使用 querySelector('.home') 来获取元素。

一般来说，如果一个属性有一个像背景颜色这样的连字符，你可以把它转换成驼峰式，即backroundColor

查看MDN - HTMLElement.style