Run ❯
Get your
own
website
Result Size:
625 x 565
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!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> <h1>The Element Object</h1> <h2>The scrollHeight and scrollWidth Properties</h2> <button onclick="myFunction()">Adjust</button> <p>Click "Adjust" to set the width and height of "content" to the values returned from scrollHeight and scrollWidth.</p> <div id="content">Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..</div> <script> function myFunction() { const element = document.getElementById("content"); element.style.height = element.scrollHeight + "px"; element.style.width = element.scrollWidth + "px"; } </script> </body> </html>