Javascript Reference - HTML DOM Style height Property

The height property in CSS controls height for block-level elements or elements with absolute or fixed position.

The height property sets or gets the height of an element in Javascript.

Browser Support


`height`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the height property:

var v = object.style.height

Set the height property:

object.style.height='auto|length|%|initial|inherit;

Property Values

Value	Description
auto	Default. Let browser set the height.
length	Set the height in length units
%	Set the height in percent of the container element
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	auto
Return Value:	A string representing the height
CSS Version	CSS1

Example

The following code shows how to set the element height.


<!DOCTYPE html>
<html>
<body>
<button type="button" id="myBtn" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   w  w  w .ja  v  a  2s  .c om-->
    document.getElementById("myBtn").style.height = "50px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the height of a <div> element:


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--  w w w  .j a  va  2  s  .  co  m-->
    width: 100px;
    height: 100px;
    background-color: coral;
    color: white;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">myDIV</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.height = "500px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to change the height and width of an <img> element.


<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="http://java2s.com/style/demo/border.png" width="100" height="132">
<br>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   w  w  w  .jav a  2 s  . co m-->
    document.getElementById("myImg").style.height = "300px";
    document.getElementById("myImg").style.width = "300px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the height of an <img> element:


<!DOCTYPE html>
<html>
<body>
<!--  ww  w .jav  a2s.  c  o  m-->
<img id="myImg" src="http://java2s.com/style/demo/border.png" style="width:100px;height:132px;">
<br>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myImg").style.height);
}
</script>

</body>
</html>

The code above is rendered as follows: