个人中心
gpt4 book ai didi

javascript - 如何使用 javascript 正确更改 div 的大小？

转载 作者：行者123 更新时间：2023-11-27 23:32:50 27 4
gpt4 key购买 nike

我正在尝试通过 javascript 更改 div 的大小。缩小它可以，但缩小后我无法将其恢复到正常大小。

代码如下:

 

   <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="index.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</head>

<body onscroll="myFunction()">

    <div class="row iconBar">
        <div class="col">
            <img class="icons" src="insta.png">
            <img class="icons" src="email.png">
            <img class="icons" src=tel.png>
        </div>
    </div>

    <div class="row sticky-top titleBar" id="headerBar" onscroll="myFunction()">
        <div class="col">
            <img src="logo.jpg" id="logo" alt="logo.jpg">
        </div>
    </div>

    <!-- script resize when scrolling up/down -->
    <script>

        var divHeight = 0;
        var imgSize = 0;

        var header = document.getElementById("headerBar");
        var logo = document.getElementById("logo");

        window.onload = function () {
            divHeight = document.getElementById("headerBar").offsetHeight;
            imgSize = document.getElementById("logo").offsetWidth;
        };

        window.onscroll = function() {

            if (header.offsetTop > 50) {
               header.style.height = "20vh";
               logo.style.with = "12%";
            }
            else {
                header.style.height = "40vh";
               logo.style.width = "20%";
            }

        }
    </script>

    <div class="row infoBar">
        <div class="col-md-3 infoImgCol">
            <img src="haftbefehl.jpg" id="infoImg">
        </div>
        <div class="col-md-9 infoText">
            <p>
               Text
            </p>
        </div>
    </div>

    <div class="row coursePlan" style="margin-left: auto; margin-right: auto;">
        <table class="table table-bordered">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Start</th>
                    <th scope="col">Until</th>
                    <th scope="col">Coach</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">19.08.2019</th>
                    <td>9:00</td>
                    <td>13:00</td>
                    <td>Diabolo</td>
                </tr>
                <tr>
                    <th scope="row">19.08.2019</th>
                    <td>13:00</td>
                    <td>16:00</td>
                    <td>Fat Tony</td>
                </tr>
                <tr>
                    <th scope="row">21.08.2019</th>
                    <td>8:00</td>
                    <td>12:00</td>
                    <td>Larry the lobster</td>
                </tr>
                <tr>
                    <th scope="row">22.09.2019</th>
                    <td>13:00</td>
                    <td>15:30</td>
                    <td>Abo</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="row press">
        <div class="col">
            <p style="font-size: 3em; margin-top:5vh;">Press</p>
            <p style="margin-bottom: 10vh;">
                Text
            </p>
        </div>
    </div>

    <footer>
        <div class="row">
            <div class="col">
                <p style="margin-left: 1vw; margin-top: auto;margin-bottom: auto;">Warung Yoga Gmbh ©</p>
            </div>
        </div>
    </footer>
</body>


</html>

CSS:

    .icons{
        width:2%;
        float:right;
        margin-right:1vw;
        margin-top:2vh;
        background-color: white;
    }

    .titleBar{
        background-color: white;
        text-align: center;
        position: sticky;
        top:0;
    }
    #logo{
        width: 20%;

    }
    .infoBar{

        margin-top: 5vh;
        text-align: center;
        background-color: rgb(26, 26, 26);
        color: white;
    }
    .infoImgCol{
        text-align: center;
    }
    #infoImg{
        width: 60%;
    }
    .infoText{
        text-align: center justify;
        margin: auto;
    }   

    .coursePlan{
        width: 80%;
        margin-left: auto;
        margin-right:auto;
        margin-top: 10vh;
        text-align: center;
    }

    .newsTitle{
        background-color: rgb(26, 26, 26);
        margin-top: 10vh;
        text-align: center;
        color:white;
    }

    .press{
        background-color: rgb(26, 26, 26);
        color:white;
        margin-top:5vh;
        text-align: center;
    }

加载页面时，我将默认大小存储在 divHeight 中。缩小 div 后，我希望它在再次到达页面顶部后恢复正常。

最佳答案

您可以使用 jQuery 更改 div 的大小(将其放在您的脚本上方，该脚本应位于您的结束正文标记上方):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您可以更改内容的 css:

$("#idofdiv").css("height", "whatever height you want");

我不确定您何时真正想要更改 div 的大小，因为您的问题有点不清楚，但希望这对您有所帮助!

关于javascript - 如何使用 javascript 正确更改 div 的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57394733/

27 4 0
文章推荐： c++ - 两个类——如何从另一个类访问一个类的对象？
文章推荐： regex - HTML5 模式匹配和 MinLength 文本框问题 -
文章推荐： c++ - 如何反转单个单词？
文章推荐： css - 是否有 CSS 父级选择器？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com