如何获得div的宽高

div是网页中经常使用的容器元素之一，常常需要获得其宽高来进行样式布局或相关计算。jQuery是一个方便的JavaScript库，它有许多方便的方法可使用，本文将介绍怎样使用jQuery来获得div的宽高。

使用jQuery的width()和height()方法

jQuery提供了width()和height()方法来获得一个元素的宽高。这两个方法返回的是不带单位的数字值。可以通过jQuery选择器来选取需要获得宽高的元素，在回调函数中使用width()和height()方法获得元素的宽高。下面是一个例子：

$(document).ready(function(){vardivWidth=$('div').width();vardivHeight=$('div').height();console.log('div的宽：'+divWidth);console.log('div的高：'+divHeight);});

使用jQuery的outerWidth()和outerHeight()方法

jQuery的outerWidth()和outerHeight()方法一样可以获得一个元素的宽高，但是它们返回的是包括padding和border的大小。这两个方法还可以接受一个可选的布尔值参数来指定会不会包括margin。下面是一个例子：

$(document).ready(function(){vardivWidth=$('div').outerWidth();vardivHeight=$('div').outerHeight();console.log('div的宽（包括padding和border）：'+divWidth);console.log('div的高（包括padding和border）：'+divHeight);});

使用jQuery的css()方法获得div大小

jQuery的css()方法用于获得或设置元素的样式。通过传递'width'或'height'参数，可以获得一个元素的宽或高。这类方法返回的是带单位的字符串值。下面是一个例子：

$(document).ready(function(){vardivWidth=$('div').css('width');vardivHeight=$('div').css('height');console.log('div的宽：'+divWidth);console.log('div的高：'+divHeight);});

总结

以上三种方法都可以用来获得一个div元素的宽高，它们返回的值分别是不带单位的数字、包括padding和border的数字和带单位的字符串。在实际利用中，请根据区别的情况选择适合的方法，以便更好地实现你的需求。

桂,哥,网,络www.GuIgege.cn