Блог

Это код, который у меня есть до сих пор, и он расширяет div, нажимая на div сам по себе. Я пытаюсь заставить его расшириться, нажав на кнопку.

  var cardActual = document.createElement('div');
    cardActual.setAttribute('id', 'card_actual');
    document.body.appendChild(cardActual);
    var $card = document.querySelectorAll('.card');
    var $cardActual = document.querySelector('#card_actual');
    $cardActual.position = "absolute";

    var position = {};
    var size = {};


    //modal action stuffs
    var openFSM = function (event) {
        var $this = event.currentTarget;
        position = $this.getBoundingClientRect();
        size = {
            width: window.getComputedStyle($this).width,
            height: window.getComputedStyle($this).height
        }

        $cardActual.style.position = "absolute";
        $cardActual.style.top - position.top   'px';
        $cardActual.style.left = position.left   'px';
        $cardActual.style.height = size.height;
        $cardActual.style.width = size.width;
        $cardActual.style.margin = $this.style.margin;

        setTimeout(function () {
            $cardActual.innerHTML = $this.innerHTML;
            var classes = $this.classList.value.split(' ');
            for (var i = 0; i < classes.length; i  ) {
                $cardActual.classList.add(classes[i]);
            }
            $cardActual.classList.add('growing');
            $cardActual.style.height = '100vh';
            $cardActual.style.width = '100vw';
            $cardActual.style.top = '0';
            $cardActual.style.left = '0';
            $cardActual.style.margin = '0';
        }, 1);
for (var i = 0; i < $card.length; i  ) {
        $card[i].addEventListener("click", openFSM);
    }
    $cardActual.addEventListener("click", closeFSM);
 

Если я создам переменную $button, которая выбирает button, она создаст еще одну кнопку.

Вызовите функцию для расширения div в событии onClick кнопки.

 <button onclick="functionToExpandDiv()">Expand Div</button>