How to find height with jquery-Front-end Q&A-php.cn

How to find height with jquery

青灯夜游

Release： 2022-06-09 16:50:32

Original

2738 people have browsed it

Method: 1. Use "$(selector).height()" to get the height of the element; 2. Use "$(window).height()" to get the height of the visible area of the current window; 3. Use " $(document).height()" to get the height of the current window document; 4. Use "$(document.body).height()" to get the height of the current window document body; 5. Use "$(document).scrollTop()" "Get the screen scroll height.

How to find height with jquery

The operating environment of this tutorial: windows7 system, jquery3.6.0 version, Dell G3 computer.

jquery various height acquisition methods

1. Get the element or screen height

$(selector).height()被选元素的高度
$(window).height()浏览器当前窗口可视区域高度
$(document).height()   浏览器当前窗口文档的高度
$(document.body).height()  浏览器当前窗口文档 body 的高度
$(document.body).outerHeight(true)   文档body 的总高度 （border padding margin)

Copy after login

2. Screen scroll height

$(document).scrollTop()

Copy after login

3. Get the height of the container from the top

document.getElementById(str).getBoundingClientRect().top

Copy after login

Example:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log("div的高度: " + $("div").height());
					console.log("浏览器当前窗口可视区域高度: " + $(window).height());
					console.log("浏览器当前窗口文档 body 的高度: " + $(document.body).height());
				});
			});
		</script>
	</head>
	<body>

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

	</body>
</html>

Copy after login

How to find height with jquery

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of How to find height with jquery. For more information, please follow other related articles on the PHP Chinese website!