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

监听屏幕的改变:


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

效果:
window.onresize监听div和屏幕的改变_第1张图片

2 .监听div大小的改变


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

效果:
window.onresize监听div和屏幕的改变_第2张图片

你可能感兴趣的:(HTML基础)