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

最新推荐文章于 2024-07-23 09:47:17 发布

小溪彼岸

最新推荐文章于 2024-07-23 09:47:17 发布

阅读量3.3w

点赞数 4

分类专栏： # HTML 文章标签： window onresize

本文链接：https://blog.csdn.net/zww1984774346/article/details/52190225

版权

HTML 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

监听屏幕的改变：

<!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大小的改变

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

效果：
这里写图片描述

小溪彼岸

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
window.onresize监听div和屏幕的改变

监听屏幕的改变：<!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=
复制链接

扫一扫

专栏目录