在jQuery中,获取元素的宽和高有多种方法,取决于你是否需要包括边框、内边距或其他额外空间。以下是几种常用的方式:
-
获取元素内容区域的宽和高(不包括边框和内边距):
var width = $('#yourElement').width(); var height = $('#yourElement').height();
-
获取元素的总宽和高,包括内边距(但不包括边框):
var innerWidth = $('#yourElement').innerWidth(); var innerHeight = $('#yourElement').innerHeight();
-
获取元素的外部宽和高,包括边框和内边距:
var outerWidth = $('#yourElement').outerWidth(); var outerHeight = $('#yourElement').outerHeight();
如果你想连同水平方向的滚动条(如果有的话)也包括进去,可以这样写:
var outerWidthWithScroll = $('#yourElement').outerWidth(true); var outerHeightWithScroll = $('#yourElement').outerHeight(true);
-
使用原生JavaScript属性: 如果你不需要jQuery特定的功能,也可以直接使用原生JavaScript属性来获取更为精确的尺寸信息,这通常与jQuery提供的功能相对应:
var element = document.getElementById('yourElement'); var clientWidth = element.clientWidth; var clientHeight = element.clientHeight; // 内容区域加内边距,不包括边框 var offsetWidth = element.offsetWidth; var offsetHeight = element.offsetHeight; // 包括内容、内边距和边框
请注意,.width()
和 .height()
在未指定参数时获取的是内容区域的尺寸,若要获取考虑窗口滚动条影响的完整尺寸,可以使用 .outerWidth()
或 .outerHeight()
并传入布尔值 true
。同时,请确保在DOM加载完成后执行这些操作,避免在元素尚未渲染完成时获取不到正确的尺寸。