利用javascript（自定义事件）记录尺寸可变元素的尺寸变化过程

1.效果图

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <style type="text/css">
        div{
            border:1px solid black;
            width:200px;
            height: 95px;
            resize:both;
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        function showSize(elementSize) {
            console.log("width:"+elementSize.width+";height:"+elementSize.height);
        }
        HTMLDivElement.prototype.onsizechange = function (handleFunction) {
            var element = this;
            var lastWidth = element.clientWidth;
            var lastHeight = element.clientHeight;

            setInterval(function () {
                if (lastWidth === element.clientWidth && lastHeight === element.clientHeight)
                    return;
                if (typeof (handleFunction) == 'function') {
                    lastWidth = element.clientWidth;
                    lastHeight = element.clientHeight;
                    handleFunction({ width: lastWidth, height: lastHeight });

                }
            }, 100);
            return element;
        };
        window.onload = function () {
            var myDiv = document.getElementById("myDiv");
            myDiv.onsizechange(showSize);
        };
    </script>
</head>
<body>
<div id="myDiv"><p>尺寸可变元素<br/>width:200px;height:95px</p></div>
</body>
</html>
posted @ 2018-03-28 16:48  寒塘渡鹤影冷月葬花魂  阅读(331)  评论(0)  编辑  收藏  举报