What is the usage of jquery height()-Front-end Q&A-php.cn

What is the usage of jquery height()

青灯夜游

Release： 2021-11-12 17:45:37

Original

2570 people have browsed it

In jquery, the height() method is used to set or return the height of the selected element. It can return the height of the first matching element. The syntax is "$(selector).height()"; but it can be set The height of all matching elements, syntax "$(selector).height(value)".

What is the usage of jquery height()

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

height() method sets or returns the height of the selected element.

When this method is used to return height, it returns the height of the first matching element. Syntax format:

$(selector).height()

Copy after login

When this method is used to set the height, the height of all matching elements is set. Simple syntax format:

$(selector).height(value)

Copy after login

You can also set the height by calling the callback function

$(selector).height(function(index,currentheight))

Copy after login

index - Returns the index position of the element in the collection.
currentheight - Returns the current height of the selected element.

Example:

1. Get the height

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					alert("div的高度: " + $("div").height());
				});
			});
		</script>
	</head>
	<body>

		<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br>
		<button>显示div的高度</button>

	</body>
</html>

Copy after login

What is the usage of jquery height()

2 , Set height

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("#btn1").click(function() {
					$("div").height(500);
				});
				$("#btn2").click(function() {
					$("div").height("10em");
				});
				$("#btn3").click(function() {
					$("div").height("200pt");
				});
			});
		</script>
	</head>
	<body>

		<button id="btn1">设置div高度为500px</button>
		<button id="btn2">设置div高度为10em</button>
		<button id="btn3">设置div高度为200pt</button>
		<p><b>注意:</b> 对于em, pt, etc要使用""</p>
		<div style="height:100px;border:1px solid blue;background-color:lightblue;"></div><br>

	</body>
</html>

Copy after login

What is the usage of jquery height()

Recommended related video tutorials: jQuery Tutorial (Video)

The above is the detailed content of What is the usage of jquery height(). For more information, please follow other related articles on the PHP Chinese website!