Question

这是我到目前为止的代码，它通过单击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变量，则会再创建一个按钮。

Answer 1

调用该函数以在按钮的onClick事件中扩展div。

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

如何通过单击按钮扩展div？

1 个答案: