Javascript 我对包含2个div元素的html/js任务有问题_Javascript_Html_Css

Javascript 我对包含2个div元素的html/js任务有问题

javascript html css

Javascript 我对包含2个div元素的html/js任务有问题,javascript,html,css,Javascript,Html,Css,html中有两个任意大小的块，当您单击其中一个块时，该块消失，第二个块的大小减小20 px，颜色变为蓝色（在javascript中） #第二组 { 宽度：100px；高度：100px；背景：黄色；过渡：宽度2s； -moz跃迁：宽度2s； -webkit过渡：宽度2s； -o过渡：宽度2s； } #div1{高度：100px；宽度：100px；背景：#ff0000；} 函数getStyle（obj）{ var style=null； if（window.getComputedStyle）{

html中有两个任意大小的块，当您单击其中一个块时，该块消失，第二个块的大小减小20 px，颜色变为蓝色（在javascript中）


#第二组
{
宽度：100px；
高度：100px；
背景：黄色；
过渡：宽度2s；
-moz跃迁：宽度2s；
-webkit过渡：宽度2s；
-o过渡：宽度2s；
}
#div1{高度：100px；宽度：100px；背景：#ff0000；}
函数getStyle（obj）{
var style=null；
if（window.getComputedStyle）{
style=window.getComputedStyle（obj，null）；//不是IE
}否则{
style=obj.currentStyle；//IE
}
回归风格；
}
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'；
}

HTML

SCSS

请分享你的努力到目前为止你尝试了什么。问题是什么？

<!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>

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

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');
    });
}

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

        &.hidden {
            display: none;
        }

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