Question

我有一个带有div和一个CSS类的HTML页面。我希望附加到它的class元素，在按下按钮时被另一个类替换。而且大多数重要我都不希望更改该类的一行CSS属性，我希望将整个类替换为另一个类。

可以做到吗？

对不起，如果已经回答了，我只是找不到我想要的东西。这是HTML和CSS的小代码段：

.class1{
  margin: 20px;
  padding: 20px;
  height: 100px;
  width: 150px;
  color: white;
  background-color: black;
}

.class2{
  margin: 20px;
  padding: 20px;
  height: 100px;
  border-radius: 5px;
  width: 200px;
  color: black;
  background-color: yellow;
}

<html>
<body>
	<button>Click</button>
	<div class="class1"><p>Hello Everyone</p></div>
</body>
</html>

（我希望在javascript的帮助下，将 class1 类替换为 class2 。）

Answer 1

使用path到classList并从元素中添加remove。

classes

function a() {
var ele=document.querySelector('#a');
  ele.classList.remove('class1');
  ele.classList.add('class2');
}

.class1 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  width: 150px;
  color: white;
  background-color: black;
}

.class2 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  border-radius: 5px;
  width: 200px;
  color: black;
  background-color: yellow;
}

Answer 2

var btn = document.getElementById('btn');
var box = document.getElementById('box');

btn.addEventListener('click', function() {
  box.classList.remove('class1');
  box.classList.add('class2');
});

.class1 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  width: 150px;
  color: white;
  background-color: black;
}

.class2 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  border-radius: 5px;
  width: 200px;
  color: black;
  background-color: yellow;
}

<button id="btn">Click</button>
<div id="box" class="class1">
  <p>Hello Everyone</p>
</div>

Answer 3

如果为按钮添加了id，则可以向其添加点击事件监听器，然后将类为class1的 all 元素更改为class2 {{1} } forEach`循环。

这样，如果您有多个by using a类的元素，它将更改所有元素，而不仅仅是其中一个。

class1

document.getElementById("btn").addEventListener("click", _ => {
  [...document.getElementsByClassName("class1")].forEach(elem => {
    elem.classList.remove("class1");
    elem.classList.add("class2");
  });
})

.class1 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  width: 150px;
  color: white;
  background-color: black;
}

.class2 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  border-radius: 5px;
  width: 200px;
  color: black;
  background-color: yellow;
}

如果您要在两个类之间切换，可以使用以下这段代码：

<button id="btn">Click</button>
<div class="class1">
  <p>Hello Everyone</p>
</div>

以上内容将在名为const index_b = elem.classList.contains("class1"); elem.classList.remove(classes[+!index_b]); elem.classList.add(classes[+index_b]);的数组中的两个类之间切换，使您可以连续单击按钮以在两个类之间进行切换。

classes

const classes = ["class1", "class2"];
document.getElementById("btn").addEventListener("click", _ => {
  [...document.getElementsByClassName("toggle")].forEach(elem => {
    const index_b = elem.classList.contains(classes[0]);
    elem.classList.remove(classes[+!index_b]);
    elem.classList.add(classes[+index_b]);
  });
})

.class1 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  width: 150px;
  color: white;
  background-color: black;
}

.class2 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  border-radius: 5px;
  width: 200px;
  color: black;
  background-color: yellow;
}

Answer 4

尝试这个

   <style>
    .class1 {
        margin: 20px;
        padding: 20px;
        height: 100px;
        width: 150px;
        color: white;
        background-color: black;
    }

    .class2 {
        margin: 20px;
        padding: 20px;
        height: 100px;
        border-radius: 5px;
        width: 200px;
        color: black;
        background-color: yellow;
    }
</style>
<script>
    function changeclass() {

        let div = document.getElementsByClassName("class1")[0];

        //or Use by Id

        let div = document.getElementById("class1");
        div.setAttribute("class", "class2");
    }
</script>
<button onclick="changeclass();">Click</button>
<div id="class1" class="class1"><p>Hello Everyone</p></div>

javascript用另一个类替换div的类

4 个答案: