Style Height

Syntax

.height()

Description

The .height method is used to return the css height of the specified element. This property will return your selected element's height including top and bottom padding. The below examples show how to change an element style using height style property.

Example Code

<style> h4 {height:20px;margin:60px;padding:5px;border:5px solid #666; cursor:pointer;} h5 {height:20px;margin:15px;padding:5px;border:3px solid #666; cursor:pointer; background-color:pink;} </style> <script type="text/javascript" src="jquery.js"></script> <link href='http://hscripts.com/style-new.css' rel='stylesheet' type='text/css'> <script type="text/javascript"> $(document).ready(function(){ $("h4").click(function(){ $("h4").css("height", 20); $("h4").css("color","green"); $("h4").html("The Height of the Paragraph is " + $("h4").height()+"px."); }); $("h5").click(function(){ $("h4").css("height", 30); $("h4").html("The Height of the Paragraph is " + $("h4").height()+"px."); }); }); </script> <font color="Red">Jquery Height Style Property.</font> <h4>Click Mouse Once Here</h4> <h5>Click Once to Change Height:30px</h5><br>