HTML DOM scrollHeight Property
The DOM scrollHeight property is used to return the height of an element. This property includes padding and also content that is not visible on the screen due to overflow but does not include a border, scrollbar, or margin. It is a read-only property.
Syntax:
element.scrollHeight
Return Value: It returns the height of the content of the element in pixels.
Example: In this example, we will use DOM scrollHeight property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM scrollHeight Property
</ title >
< style >
#GFG {
width: 250px;
height: 100px;
overflow: auto;
margin: auto;
}
#content {
height: 300px;
padding: 10px;
background-color: green;
color: white;
}
</ style >
</ head >
< body style = "text-align: center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h2 >
DOM scrollHeight Property
</ h2 >
< button onclick = "Geeks()" >
Click me!
</ button >
< br >< br >
< div id = "GFG" >
< div id = "content" >
Text content...
</ div >
</ div >
< p id = "p" ></ p >
< script >
function Geeks() {
let doc = document.getElementById("content");
let x = doc.scrollHeight;
document.getElementById("p").innerHTML
= "Height: " + x + "px";
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers: The browser supported by the scrollHeight property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 5.0
- Firefox 21.0
- Opera 8.0
- Safari 1.0
Last Updated :
30 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...