jQuery如何获取元素尺寸？-编程学习网

这篇文章将为大家详细讲解有关jQuery如何获取元素尺寸？，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jQuery 获取元素尺寸

jQuery 库提供了一些方法来获取元素的尺寸，包括：

1. width() 和 height()

这两个方法返回元素的宽和高，单位为像素。

// 获取元素的宽度
var width = $("#element").width();

// 获取元素的高度
var height = $("#element").height();

2. innerWidth() 和 innerHeight()

这两个方法返回元素的内部宽高，不包括边框和内边距。

// 获取元素的内部宽度
var innerWidth = $("#element").innerWidth();

// 获取元素的内部高度
var innerHeight = $("#element").innerHeight();

3. outerWidth() 和 outerHeight()

这两个方法返回元素的外部宽高，包括边框和内边距。

// 获取元素的外部宽度
var outerWidth = $("#element").outerWidth();

// 获取元素的外部高度
var outerHeight = $("#element").outerHeight();

4. offset()

offset() 方法返回元素相对于文档的偏移量（top 和 left）。它还可用来设置偏移量。

// 获取元素相对于文档的偏移量
var offset = $("#element").offset();

// 获取元素的顶部偏移量
var top = offset.top;

// 获取元素的左边偏移量
var left = offset.left;

5. position()

position() 方法返回元素相对于其父元素的偏移量（top 和 left）。

// 获取元素相对于其父元素的偏移量
var position = $("#element").position();

// 获取元素的顶部偏移量，相对于其父元素
var top = position.top;

// 获取元素的左边偏移量，相对于其父元素
var left = position.left;

使用示例

以下是一些使用上述方法获取元素尺寸的示例：

// 获取元素的宽度并将其存储在变量中
var width = $("#element").width();

// 获取元素的内部高度并将其存储在变量中
var innerHeight = $("#element").innerHeight();

// 获取元素相对于其父元素的偏移量
var position = $("#element").position();

// 如果元素的顶部偏移量大于 100 像素，则将元素隐藏
if (position.top > 100) {
  $("#element").hide();
}

注意事项