поворот. js проблема с css зумом

Question

Я знаю этот поворот. js имеет собственное масштабирование, но я добавил простой скрипт масштабирования с css масштабированием.

Он работает, я имею в виду, когда вы нажимаете кнопку масштабирования, он работает увеличьте масштаб страницы (и уменьшите масштаб), но я не могу понять, как изменить размер флипбука.

У меня есть eventListener для полноэкранного режима, но он, похоже, не работает для увеличения. (Я знаю, что это может быть очень просто, но я просто не мог этого понять.)

<button onclick="zoomed()" class="fa fa-search-plus" > </button> 

<!-- Zoom -->
var zoom_el = document.getElementById("flipbook");
var zom= true;
function zoomed(){
    if (zom == true) {
    zoom_el.style.zoom = 1.5;
    zoom_el.style.MozTransform = 'scale(1.5)';
    zoom_el.style.WebkitTransform = 'scale(1.5)';
    autoCenter: true
    zom = false
    }
    else {
    zoom_el.style.zoom= 1;
    zoom_el.style.MozTransform = 'scale(1)';
    zoom_el.style.WebkitTransform = 'scale(1)';
    autoCenter: true
    zom=true
    }
}


<!-- EventListener -->

window.addEventListener('resize', function (e) {
  flip.style.width = '';
  flip.style.height = '';
  $(flip).turn('size', flip.clientWidth, flip.clientHeight);

Answer 1

Хорошо, мне удалось отредактировать его правильно, добавив в css класс .zoomed

.zoomed{
    width:1383px !important;
    height:900px  !important;
    left:-411px  !important;
    top:200px  !important;
    padding-bottom:30px  !important;
}

кнопку

<button id="zoomed" class="fa fa-search-plus" > </button>

, и я нашел на этом веб-сайте ответ. Слушатель событий не обнаруживает изменения класса, поэтому нам нужен наблюдатель мутаций.

const mainNode = document.getElementById('flipbook')
const toggleNode = document.getElementById('zoomed')

toggleNode.addEventListener('click', function() {
  mainNode.classList.toggle('--zoomed')
})

function callback(mutationsList, observer) {
    console.log('Mutations:', mutationsList)
    console.log('Observer:', observer)
    mutationsList.forEach(mutation => {
        if (mutation.attributeName === 'class') {
            zoomed_el.style.width = '';
            zoomed_el.style.height = '';
            autoCenter: true
        $(zoomed_el).turn('size', zoomed_el.clientWidth, zoomed_el.clientHeight);
        }
    })
}

const mutationObserver = new MutationObserver(callback)

mutationObserver.observe(mainNode, { attributes: true })

Хотя вам может понадобиться слушатель событий

window.addEventListener('resize', function (e) {
  zoomed_el.style.width = '';
  zoomed_el.style.height = '';
  $(zoomed_el).turn('size', zoom_el.clientWidth, zoom_el.clientHeight);
});