Home
JS
JS
Tryit: JAVASCRIPT
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <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>请注意，这些属性返回高度和宽度，包括填充，但不包括边框、滚动条或边距。</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 = "Height: " + y + "px<br>Width: " + x + "px"; } </script> </body> </html>