window.onresize监听div和屏幕的改变

2021-07-09 10:40:25 浏览数 (1)

监听屏幕的改变:

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <meta content="telephone=no" name="format-detection">
</head>
<body>
    <label id="show"></label>
    <script>
        window.onresize = adjuest;
        adjuest();
        function adjuest(){
            var label = document.getElementById("show");
            label.innerHTML = "width = " window.innerWidth ";height=" window.innerHeight;
        }
    </script>
</body>
</html>

效果:

2 .监听div大小的改变

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="show_div" style="background-color: lightblue;width: 100%;height: 300px;"></div>
    <label id="show"></label>
    <script>
        window.onresize = adjuest;
        adjuest();
        function adjuest(){
            var label = document.getElementById("show");
            var divCon = document.getElementById("show_div");
            label.innerHTML = "width = " divCon.offsetWidth ";height=" divCon.offsetHeight;
        }
    </script>
</body>
</html>

效果:

0 人点赞