Переключить несколько классов внутри тега с помощью JS - PullRequest
Новая
       0

Переключить несколько классов внутри тега с помощью JS

1 голос
/ 08 апреля 2020

Я учусь писать JS и пытаюсь создать страницу, где изображение переворачивается по горизонтали и вертикали с помощью 2 кнопок.

В данный момент кнопки переключают класс CSS в теге изображения, чтобы перевернуть изображение, однако я не могу найти способ, чтобы оба класса были добавлены одновременно в тег изображения, чтобы получить результат изображение переворачивается по горизонтали и вертикали.

Есть ли в JS classi c способ переключать несколько классов в теге 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")
})

1 Ответ

2 голосов
/ 08 апреля 2020

Это проблема 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...