在前端开发中，我们经常需要获取元素的尺寸信息。本文将介绍如何使用jQuery获取一个div元素的可见高度。
可见高度和实际高度
在HTML和CSS中，每个元素都有一个默认的显示模式（display mode）。这个显示模式决定了元素如何布局和渲染。对于一个div元素来说，默认的显示模式是“块级元素”（block element），它会占据一行并且会在上下两个方向上留出一定的空白。
一个div元素的高度可以分为实际高度和可见高度两部分。实际高度指的是元素在页面中所占据的全部高度，包括内边距（padding）、边框（border）和内容区域（content box）；可见高度则是指元素在页面中实际可见的高度，也就是排除了上下两个方向的空白部分。
获取可见高度
使用jQuery可以很方便地获取一个div元素的可见高度。具体方法如下：
var height = $('div').height();这个代码片段中，我们使用了jQuery选择器来选中了所有的div元素，并用height()方法获取了它们的可见高度。如果想要获取多个div元素的可见高度，只需要将选择器修改为对应的CSS选择器即可。
需要注意的是，如果div元素设置了box-sizing: border-box样式，那么获取到的高度将包含内边距和边框的高度。
示例代码
下面是一个完整的示例代码，它演示了如何使用jQuery获取一个div元素的可见高度，并将获取到的高度输出到控制台中。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------
------- -----------------------------------------------------------
-------
--- -
------- ------
------- --- ----- -----
-------- -----
----------- -----------
-
--------
-------
------
--------------------
--------
--- ------ - ------------------
-------------------- - --------
---------
-------
-------在这个例子中，我们定义了一个div元素，并将其高度设置为100像素。我们还设置了一些基本的样式来让这个div元素有一定的外观效果。在JavaScript部分，我们使用了jQuery的选择器和height()方法来获取这个div元素的可见高度，并通过console.log()方法将它输出到控制台中。
总结
本文介绍了如何使用jQuery获取一个div元素的可见高度。通过本文的学习，我们不仅能够掌握这个具体的技术点，还能够更深入地理解HTML和CSS中元素的尺寸概念。在实际开发中，我们可以根据这个方法来获取任何元素的可见高度，并在需要的时候对它们进行处理和调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12842