jQuery Get and Set Elements Width and Height in Tamil


In jQuery, you can use the width() and height() methods to get or set the width and height of HTML elements, respectively.

Get Width and Height

To get the width or height of an element, you can use the width() and height() methods without passing any arguments.

Set Width and Height

To set the width or height of an element, you can pass a value as an argument to the width() or height() method.



Source Code

  • The jQuery code is enclosed in a $(document).ready() function, which ensures that the jQuery code executes when the document has finished loading.
  • $("div") selects the <div> element on the page.
  • .width('200px'): Sets the width of the selected <div> element to 200 pixels.
  • .height('200px'): Sets the height of the selected <div> element to 200 pixels.

In summary, when the document is ready, the jQuery code modifies the width and height of the <div> element and applies additional styling. The resulting output should be a pink box with red text displaying "Tutor Joes" inside, and the box dimensions will be 200px by 200px.

<html>
	<head>
		<title>Height Width</title>
	</head>
	<body>
		<div>Tutor Joes</div>
	<script src="js/jquery.js"></script>
	<script>
		$("document").ready(function(){
			$("div").width('200px').height('200px').css({
				'color':'red',
				'background':'pink'
			});
		});
	</script>
	</body>
</html>

Remember to include the jQuery library in your HTML file using the <script> tag before using these methods. In these examples, the jQuery library is included from a CDN (Content Delivery Network).