我正在学习写JS，并试图创建一个用2个按钮水平和垂直翻转图像的页面。
目前，按钮在图像标签中切换一个CSS类来翻转图像，但我找不到一种方法在图像标签中将两个类同时添加，以获得图像水平和垂直翻转的结果。
在JS classic中有没有一种方法，在一个HTML标记中切换多个类？
HTML:
<body>
<img id="image" src="./img/img_1.jpg">
<div class="button">
<button id="button_horizontal">Flip Horizontal</button>
<button id="button_vertical">Flip Vertical</button>
</div>
<script src="script.js"></script>
</body>
CSS：
.flip_horizontal{
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.flip_vertical{
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
JS:
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")
})
这是CSS问题，而不是Javascript问题。当一个元素同时具有这两个类时，后面的transform属性将优先于前面的属性，因此，当应用这两个属性时，只有.flip_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');
horizontal.addEventListener('click', function() {
image.classList.toggle("flip_horizontal");
})
vertical.addEventListener('click', function() {
image.classList.toggle("flip_vertical");
}).flip_horizontal {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.flip_vertical {
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
.flip_vertical.flip_horizontal {
-webkit-transform: scaleY(-1, -1);
transform: scale(-1, -1);
}<img id="image" src="https://via.placeholder.com/150x300">
<div class="button">
<button id="button_horizontal">Flip Horizontal</button>
<button id="button_vertical">Flip Vertical</button>
</div>