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

来源：互联网发布：出租屋装修知乎编辑：程序博客网时间：2024/05/18 01:39

监听屏幕的改变：

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

效果：
这里写图片描述

0 0