JQuery Width and Height

From CoderLearner
Jump to: navigation, search

jQuery assign height and width

The $.height(val) and $.width(val) use to assign height and width respective to the HTML elements.

Syntax

$("div").height("490");
$("div").width("490");

Example 1

<!DOCTYPE html>
<html>
	<head>
		<title>height and width</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery.min.js">
		</script>
		<script language="javascript">
			$(document).ready(function(){
				$("div").height("490");
				$("div").width("490");
				$("div").css("background-color","grey");
			});
		</script>
	</head>
	<body>
            <div>my Content</div>
	</body>
</html>

Example 2

Get the height

var height = $('div#box').height();
var width = $('div#box').width();

Complete code

<!DOCTYPE html>
<html>
   <head>
      <title>odd even</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <style>
         #box {
            width:300px;
            height:200px;
            background-color:#D0D0D0;
         }
      </style>
      <script>
         $(document).ready(function(){
            var height = $('div#box').height();
            var width = $('div#box').width();
            $('#display').html('Height: '+height+'--'+'Width:'+width);
         });
      </script>
   </head>
   <body>
      <div id="box">
      </div>
      <div id="display"></div>
   </body>
</html>

Try It

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>