jQuery 中获取元素的宽度和高度

在开发中，经常需要获取元素的宽度和高度，使用 jQuery 可以非常方便地实现这个功能。

获取元素的宽度和高度的方法

jQuery 提供了两个方法来获取元素的宽度和高度：width() 和 height()。

width()

width() 方法返回元素的宽度，可以用来获取单个元素的宽度，也可以用来设置元素的宽度。语法如下：

$(selector).width()

其中，selector 是元素的选择器。

下面是一个例子，用来获取一个 div 元素的宽度：

var divWidth = $('div').width();
console.log('div 元素的宽度为：' + divWidth);

height()

height() 方法返回元素的高度，可以用来获取单个元素的高度，也可以用来设置元素的高度。语法如下：

$(selector).height()

其中，selector 是元素的选择器。

下面是一个例子，用来获取一个 div 元素的高度：

var divHeight = $('div').height();
console.log('div 元素的高度为：' + divHeight);

获取元素的宽度和高度的单位

width() 和 height() 方法返回的宽度和高度是不带单位的，可以使用 css() 方法获取元素的宽度和高度的单位。语法如下：

$(selector).css('propertyName')

其中，selector 是元素的选择器，propertyName 是 CSS 属性名。

下面是一个例子，用来获取一个 div 元素的宽度和单位：

var divWidth = $('div').width(),
    divWidthUnit = $('div').css('width');

console.log('div 元素的宽度为：' + divWidth + ' ' + divWidthUnit);

总结

使用 jQuery 可以轻松地获取元素的宽度和高度，为开发带来了很大的便利。同时，也可以使用 css() 方法获取元素的宽度和高度的单位。