1.效果圖 2.源碼 ...
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>
