Javascript DOM CSS Style maxHeight Property get

Introduction

Return the maximum height of a <div> element: 

alert(document.getElementById("myDIV").style.maxHeight);

Click the button to alert the max-height of the DIV element:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from w ww. ja va  2s  .  c  o  m
  width: 500px;
  background-color: lightblue;
  overflow: auto;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV" style="max-height:100px;">
  <p>This DIV element does not have a pre-defined height.</p>

  <p>The height of this DIV element depends on its content.</p>

  <p>But the DIV element has a max-height, and will never exceed 100 pixels.</p>
</div>

<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = document.getElementById("myDIV").style.maxHeight;
}
</script>

</body>
</html>



PreviousNext

Related