将 class 添加到具有特定文本的跨度

Question

我最初的问题是我想在我的主菜单标题上放置自定义颜色。 我通过使用 CSS 中的 title + 属性来完成此操作。 但是我不希望在悬停时出现标题属性。 所以我有了另一个想法，想知道是否可以在特定文本中添加 class（带 JS）？ 如果是这样怎么做？

每个菜单标题的结构如下： <span class="menu-text">Random text</span>

它们都有“菜单文本”class，这就是我试图区分它们的原因。 为了应用不同的颜色。

预先感谢您的回答！

Answer 1

这说明了一种在单击元素时将 class 添加到元素的简单方法。

 window.addEventListener("load", function(){ // gets the elements with the classname.menu-text in a nodeList const getAllElements = document.querySelectorAll('.menu-text'); for (let item of getAllElements) { // iterates over all of them, and attaches an event item.addEventListener('click', function () { // adds the class.has-background-red this.classList.add('has-background-red'); }); } });

 .container { /* just for visual purposes */ display: flex; gap: 16px; }.has-background-red { background-color: red; }

 <div class="container"> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> </div>