IFrame heightProperty
Frame/IFrame Object
Definition and Usage
The height property sets or returns the value of the height attribute in an iframe element.
The height attribute specifies the height of the iframe (in pixels or as a percentage).
Syntax
iframeObject.height=value
The height attribute can be one of the following values:
| Value | Description |
|---|---|
| pixels | The height attribute unit can be pixels (e.g., "100px" or "100") |
| % | The height attribute unit can be a percentage (e.g., "20%") |
Browser Support
All major browsers support the height attribute.
Example
Example
Change the height and width of the iframe:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function changeSize(){
document.getElementById("myframe").height="300";
document.getElementById("myframe").width="300";
}
</script>
</head>
<body>
<iframe id="myframe" src="../index.html" height="200" width="200">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>
<input type="button" onclick="changeSize()" value="Change size">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function changeSize(){
document.getElementById("myframe").height="300";
document.getElementById("myframe").width="300";
}
</script>
</head>
<body>
<iframe id="myframe" src="../index.html" height="200" width="200">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>
<input type="button" onclick="changeSize()" value="Change size">
</body>
</html>
Try it Yourself »
Frame/IFrame Object Other Extensions