源代码：
下载代码
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #content { height: 100px; width: 100px; background-color: coral; padding: 15px; border: 10px solid black; margin: 10px; overflow: scroll; } </style> </head> <body> <p>点击按钮获取 div 的整个高度（垂直）和宽度（水平）。</p> <p>高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px。</p> <p><strong>提示:</strong> 尝试删除或更改不同的 CSS 属性值，然后再次点击该按钮以了解其工作原理。</p> <button onclick="myFunction()">点我</button> <div id="content">正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..</div> <p id="demo"></p> <script> function myFunction() { var elmnt = document.getElementById("content"); var y = elmnt.scrollHeight; var x = elmnt.scrollWidth; document.getElementById ("demo").innerHTML = "高度为: " + y + "px<br>宽度为: " + x + "px"; } </script> </body> </html>
运行结果：
