第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $("#div_id")
第二步, 要看你要得到的是什么高度了, jQuery里现有的三个(其实是两个)获得高度的方法是:
1 $("#div_id")height(); // 获得的是该div本身的高度, (不包含padding,margin,border)
2 $("#div_id")outerHeight(); // 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
3 $("#div_id")outerHeight(true); // 包含该div本身的高度, 以及padding,border,margin上下的总高度
height()
-获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。
-css('height') 和 height()之间的区别是后者返回一个没有单位的数值,前者是返回带有完整单位的字符串。当一个元素的高度需要数学计算的时候推荐使用height() 方法 。
-这个方法同样能计算出window和document的高度。
$(window)height(); // returns height of browser viewport
$(document)height(); // returns height of HTML document
注意:在绝对定位和给定display:block时,虽然style和script标签用width() 或 height()也将报告一个值,强烈建议不要在这些标签中调用这些方法。这是一种不好的做法,结果也证明是不可靠的。
innerHeight()
-为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。
-这个方法返回元素的高度,包括顶部和底部的padding,单位是像素。
-这个方法不适用于window and document对象,可以使用height()代替。
outerHeight()
-获取元素集合中第一个元素的当前计算高度值,包括padding,border和选择性的margin。返回一个整数(不包含“px”)表示的值 ,或如果在一个空集合上调用该方法,则会返回 null。
-outerHeight( [includeMargin ] ):include是一个布尔值,表明是否在计算时包含元素的margin值。
-这个方法不适用于window 和 document对象,可以使用height()代替。
jquery
$(function(){
/调整窗口自动调整宽度/
$(window)resize(function(){
var h = $(window)height();
var w = $(window)width();
consoleinfo("窗口高度:" + h + "; 窗口宽度:" + w);
});
});
以上就是关于jQuery如何简单的获取一个div的高度全部的内容,包括:jQuery如何简单的获取一个div的高度、用jquery的height方法获得的元素高度怎么为0、js或者jquery如何实时获取浏览器的高度和宽度的等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)