JavaScript与jQuery获取元素的宽、高和位置
在前端开发中，获取元素的宽、高和位置是非常常见的操作。JavaScript和jQuery都提供了相应的方法来获取这些信息。本文将详细介绍如何使用JavaScript和jQuery获取元素的宽、高和位置，并给出示例代码。
JavaScript获取元素的宽、高和位置
获取元素的宽和高
可以使用offsetWidth和offsetHeight属性来获取元素的宽和高，这两个属性返回的值包括元素的边框和内边距，但不包括外边距和滚动条。
----- ------- - ------------------------------------- ----- ----- - -------------------- ----- ------ - ---------------------
获取元素的位置
可以使用getBoundingClientRect()方法获取元素相对于视窗左上角的位置。该方法返回一个对象，包含4个属性：top、right、bottom和left，分别表示元素上边缘、右边缘、下边缘和左边缘相对于视窗左上角的距离。
----- ------- - ------------------------------------- ----- ---- - -------------------------------- ----- - - ---------- ----- - - ---------
jQuery获取元素的宽、高和位置
获取元素的宽和高
可以使用width()和height()方法来获取元素的宽和高，这两个方法返回的值包括元素的内边距和边框，但不包括外边距和滚动条。
----- ----- - ------------------------ ----- ------ - -------------------------
获取元素的位置
可以使用offset()方法获取元素相对于文档左上角的位置。该方法返回一个对象，包含2个属性：top和left，分别表示元素的上边缘和左边缘相对于文档左上角的距离。
----- ------ - ------------------------- ----- - - ------------ ----- - - -----------
示例代码
以下是一个示例代码，演示如何使用JavaScript和jQuery获取元素的宽、高和位置。
--------- -----
------
------
--------------------------
------- -----------------------------------------------------------
--------
-------- ---------------- -
-- -----------------------
----- ------- - -------------------------------------
----- ----- - --------------------
----- ------ - ---------------------
----- ---- - --------------------------------
----- - - ----------
----- - - ---------
-- ---------
---------------------------
--------------------- -------
---------------------- --------
----------------- ---
----------------- ---
-- -------------------
----- -------- - ----------------
----- ----------- - -----------------
----- ------------ - ------------------
----- ------ - ------------------
----- ------- - ------------
----- ------- - -----------
-- ---------
-----------------------
--------------------- -------------
---------------------- --------------
----------------- ---------
----------------- ---------
-
---------
-------
----- --------------------------
---- -------------- ------------- ------ ------- ------ ------- --- ----- --------------
-------
-------在控制台中可以看到JavaScript和jQuery获取元素信息的结果。这个示例代码可以帮助读者更好地理解如何使用JavaScript和jQuery获取元素的宽、高和位置。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/1742