初学者入门求解之js样式

问下如何实现类似这个评论区打开的时候这个视屏会自动缩小而不是被评论区挡住

    <div class="box">

        <div id="box1"><input type="button" id="btn" value="隐藏">顶部盒子</div>
        <div id="box2">内容区域</div>
        <div id="box3">底部盒子</div>
        <div id="box4">显示盒子</div>
    </div>

        .box {
            margin: auto;
            width: 100%;
            height: 100%;
            background-color: beige;
            position: relative;

        }

        #box1 {
            width: 100%;
            height: 100px;
            background-color: aqua;

        }

        #box2 {
            width: 100%;
            height: 550px;
            background-color: antiquewhite;
        }

        #box3 {
            width: 100%;
            height: 150px;
            background-color: pink;

        }

        #box4 {
            width: 100px;
            height: 100%;
            background-color: chartreuse;
            float: left;
            position: absolute;
            top: 0;
            z-index: 1;
        }


        #btn {
            float: right;
        }

        .show {
            display: block;
        }

        .hidden {
            display: none;
        }

    var btn = document.getElementById('btn');
    var isShow = true;
    btn.onclick = function () {
        var box4 = document.getElementById('box4')
        if (isShow) {
            box4.className = 'hidden'
            btn.value = '显示';
            isShow = false;
        }
        else {
            box4.className = 'show'
            btn.value = '隐藏';
            isShow = true
        }
    }

【以下回答由 GPT 生成】

<div class="box">
    <div id="box1">
        <input type="button" id="btn" value="隐藏">顶部盒子
    </div>
    <div id="box2">内容区域</div>
    <div id="box3">底部盒子</div>
    <div id="box4">显示盒子</div>
</div>

.box {
    margin: auto;
    width: 100%;
    height: 100%;
    background-color: beige;
    position: relative;
}

#box1 {
    width: 100%;
    height: 100px;
    background-color: aqua;
}

#box2 {
    width: 100%;
    height: 550px;
    background-color: antiquewhite;
    z-index: 0; /* 该行代码用于设置box2的宽度变化时不会被box4挡住 */
}

#box3 {
    width: 100%;
    height: 150px;
    background-color: pink;
}

#box4 {
    width: 100px;
    height: 100%;
    background-color: chartreuse;
    float: left;
    position: absolute;
    top: 0;
    z-index: 1;
}

#btn {
    float: right;
}

<script>
    var box2 = document.getElementById('box2');
    var box4 = document.getElementById('box4');

    document.getElementById('btn').addEventListener('click', function() {
        if (box2.style.width === '100%') {
            box2.style.width = 'calc(100% - 100px)';
            box4.style.display = 'none';
        } else {
            box2.style.width = '100%';
            box4.style.display = 'block';
        }
    });
</script>

以上代码通过设置box2的z-index属性使其能够在宽度变化时不被box4挡住。代码已经可以实现自动缩小和展开，但是如果要实现在评论区域打开时才触发自动缩小，还需要进一步修改代码。假设评论区域有一个id为comment的元素。

<div class="box">
    <div id="box1">
        <input type="button" id="btn" value="隐藏">顶部盒子
    </div>
    <div id="box2">内容区域</div>
    <div id="box3">底部盒子</div>
    <div id="box4">显示盒子</div>
</div>

<div id="comment">
    评论区域
</div>

可以通过监听评论区域的点击事件来触发自动缩小和展开。

<script>
    var box2 = document.getElementById('box2');
    var box4 = document.getElementById('box4');
    var comment = document.getElementById('comment');

    comment.addEventListener('click', function() {
        if (box2.style.width === '100%') {
            box2.style.width = 'calc(100% - 100px)';
            box4.style.display = 'none';
        } else {
            box2.style.width = '100%';
            box4.style.display = 'block';
        }
    });

    document.getElementById('btn').addEventListener('click', function() {
        if (box2.style.width === '100%') {
            box2.style.width = 'calc(100% - 100px)';
            box4.style.display = 'none';
        } else {
            box2.style.width = '100%';
            box4.style.display = 'block';
        }
    });
</script>

这样在点击评论区域时也会触发自动缩小和展开的效果。你可以根据实际需求修改代码和样式，达到你想要的效果。

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7725592
• 你也可以参考下这篇文章：【前端知识之JS】如何判断一个元素是否在可视区域中
• 您还可以看一下 程张浩老师的原生JS扫雷游戏实战开发课程中的 初始化扫雷页面和放置地雷小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 原生js座位管理中的 去实现对每一个座位的操作而且这样还可以很轻易的获得正在操作的座位对应的行列号。具体实现如下： 部分也许能够解决你的问题。

使用flex布局，设置video容器为自适应，video设置aspect-ratio保持横纵比不变。

<style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        & main {
          flex: 1;
          background-color: #ccc;
          & img {
            width: 100%;
            aspect-ratio: 16/6;
          }
        }
        & aside {
          width: 0;
          flex-shrink: 0;
          overflow: hidden;
          transition: 0.5s ease all;
          background-color: antiquewhite;
          &.active {
            width: 320px;
          }
        }
      }
    </style>
<body>
    <main>
      <h1>video title</h1>
      <button onclick="toggle()">评论</button>
      <img src="./src/assets/img/caoImg/bg.png" alt="" />
      <h1>video information</h1>
    </main>
    <aside>评论</aside>
  </body>
  <script>
    function toggle() {
      const classList = document.querySelector("aside").classList;
      classList.contains("active") ? classList.remove("active") : classList.add("active");
    }
  </script>