我有一个带有 div 和附加到它的 CSS 类的 HTML 页面。 我希望附加到它的类元素在按下按钮时被另一个类替换。 最重要的是我不想更改该类的一行 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>(我希望类:class1 在 javascript 的帮助下点击按钮时被替换为 class2。)
最佳答案
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>关于javascript用另一个类替换一个div的类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54825156/