如何使用 Javascript 更改元素中的一个类

Posted 2023-05-08

【中文标题】如何使用 Javascript 更改元素中的一个类

【英文标题】：How do i change one of the classes in an element with Javascript

【发布时间】：2020-08-19 03:06:09

【问题描述】：

如果我有库实现和元素“h1”，我如何使用 javascript 仅将其背景颜色“黑色”更改为“白色”？例如使用按钮。

<h1 class="black red-text">Test</h1>

【问题讨论】：

嗨，Quak，到目前为止，我们需要查看您的尝试。如果我们只给您答案，您将不会学到任何东西！ This question 可能会帮助你。

@TheBlacksmith 对不起，我会在以后的帖子中记住这一点。你是对的，我不会通过得到直接的答案来学到任何东西。

【参考方案1】：

给元素一个id：

<h1 id="test" class="black red-text">Test</h1>

然后你可以像下面这样选择它：

var el = document.getElementById('test');

然后您可以使用以下代码删除黑色类：

el.classList.remove('black');

并追加新类：

el.classList.add('white');

【参考方案2】：

创建一个函数和一个white 类。在函数内部使用 document.getElementsByClassName 。由于document.getElementsByClassName 是一个集合，所以你需要使用像[0] 这样的索引来访问它

function changeColor() 
  document.getElementsByClassName("black")[0].classList.add('white')

.white 
  background: white !important;


.black 
  background: black;


.red-text 
  color: red;

<h1 class="black red-text">Test</h1>
<button onclick='changeColor()'>Change Color</button>

【参考方案3】：

这就是答案。

使用document. getElementById选择元素

点击按钮

你可以使用 title.classList.toggle("white");切换给定的类。

const button = document.getElementById('btn');
const title = document.getElementById('title');

btn.addEventListener('click', () => 
  title.classList.toggle("white");
);

.red-text 
  color: red;


.black 
  background-color: #000;


.white 
  background-color: #fff;

<h1 id="title" class="black red-text">Test</h1>
<button id="btn">Change Bg</button>

【参考方案4】：

希望这能解决您的问题。如果不添加，只需检查该类是否已存在的条件。

let h1 = document.querySelector(".red-text");
let btn = document.querySelector("#btn");


function changeColor()
    if(h1.classList.contains("black"))
      h1.classList.remove("black");
      h1.classList.add("white"); 
    else
         h1.classList.add("black");
      h1.classList.remove("white"); 
    


btn.addEventListener("click", changeColor);

.black
  background: black;
  color: red


.white
  background: white;

<h1 class="black red-text">Test</h1>

<button id="btn">Change Color</button>

【讨论】：

编辑了答案。请立即检查。

【参考方案5】：

根据 Materialise 约定保持事物整洁的一种方法可能是添加或删除类名，从而触发预先存在的样式。请注意，如果您有多个共享类的元素，您可能需要更具体的选择器：

document.querySelector('h1.black').classList.add('white');

Materialize 已经拥有大量 colour classes，因此无需创建新的。

代码笔here:

只是为了澄清：

document.querySelector('h1.black') - 查找具有匹配类的元素。您还可以使用 ID 更具体，而 .classList 检索应用于该元素的所有类（在本例中为 .black 和 .red-text）和 .add('white') - 好吧，这会添加您在括号中声明的类。

【讨论】：

那么如果我添加白色类，黑色类会自动删除？

它不会被删除，但会被覆盖：codepen.io/doughballs/pen/XW