Question

html中有2个任意大小的块，当你点击一个块时，这个块消失，第二个大小减少20 px，颜色变为蓝色（在javascript中）

Answer 1

<!DOCTYPE html>
<html>
<head>
    <style> 
        #div2
        {
            width:100px;
            height:100px;
            background:yellow;
            transition:width 2s;
            -moz-transition:width 2s; 
            -webkit-transition:width 2s; 
            -o-transition:width 2s; 
        }
        #div1{height:100px;width:100px;background:#ff0000;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>

    <script>
        function getStyle(obj){
            var style = null;
            if (window.getComputedStyle) {
                style = window.getComputedStyle(obj, null);    //not IE
            } else { 
                style = obj.currentStyle;  // IE
            }
            return style;
        }
        var oDiv1 = document.querySelector('#div1');
        var oDiv2 = document.querySelector('#div2');
        oDiv1.onclick = function(){
            this.style.display = 'none';
            var oldW = parseInt(getStyle(oDiv2).width);
            oDiv2.style.width = (oldW + 20) + 'px';
            oDiv2.style.backgroundColor = '#0000ff';
        }
    </script>
</body>
</html>

Answer 2

HTML

<div class="wrapper">
    <div></div>
    <div></div>
</div>

的JavaScript

for (let element of document.querySelectorAll('.wrapper > div')) {
    element.addEventListener('click', (event) => {
        event.target.classList.add('hidden');

        const filtered = document.querySelector('.wrapper > div:not(.hidden)');

        filtered.classList.add('filtered');
    });
}

SCSS

.wrapper {
    & > div {
        width: 64px;
        height: 64px;
        background-color: red;

        &.hidden {
            display: none;
        }

        &.filtered {
            background-color: blue;
        }
    }
}

我的html / js任务有2个div元素

2 个答案: