Javascript 使用JS在标记内切换多个类

我正在学习编写JS，并试图创建一个页面，其中图像可以通过两个按钮水平和垂直翻转

目前，按钮在图像标记中切换CSS类以翻转图像，但是我找不到一种方法将两个类同时添加到图像标记中，以使图像水平和垂直翻转

在JS classic中，有没有一种方法可以在HTML标记中切换多个类

HTML:

JS:

---

这是一个CSS问题，而不是Javascript问题。当一个元素同时具有两个类时，后面的

transform

属性将优先于前面的属性-因此，当应用这两个类时，只有

.flip\u vertical

的

transform:scaleY（-1）将可见

添加另一个CSS规则以在两个类都处于活动状态时应用缩放变换：

.flip_vertical.flip_horizontal {
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
}

此外，您还可以使用
classList.toggle
而不是选中
。contains
/
。add
/
。remove
：


const horizontal=document.getElementById（'button_horizontal'）；
const vertical=document.getElementById（'button_vertical'）；
const image=document.getElementById（'image'）；
水平.addEventListener（'click'，function（）{
image.classList.toggle（“水平翻转”）；
})
vertical.addEventListener（'click'，function（）{
image.classList.toggle（“垂直翻转”）；
})
。水平翻转{
-webkit转换：scaleX（-1）；
转换：scaleX（-1）；
}
.垂直翻转{
-webkit转换：scaleY（-1）；
变换：scaleY（-1）；
}
.垂直翻转.水平翻转{
-webkit转换：scaleY（-1，-1）；
变换：比例（-1，-1）；
}

水平翻转
垂直翻转

.flip_horizontal{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.flip_vertical{
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

const horizontal = document.getElementById('button_horizontal');
const vertical = document.getElementById('button_vertical');
const image = document.getElementById('image');

horizontal.addEventListener('click', function(){
    if (image.classList.contains("flip_horizontal")){
        image.classList.remove('flip_horizontal')}
    else image.classList.add('flip_horizontal')
})

vertical.addEventListener('click', function(){
    if (image.classList.contains("flip_vertical")){
        image.classList.remove("flip_vertical")}
    else image.classList.add("flip_vertical")
})

.flip_vertical.flip_horizontal {
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
}