jQuery 获取元素的高度

 

  • 在 jQuery 中,获取元素高度的方法有 3 个:height()innerHeight()outerHeight()

  • 元素的盒模型: height(高度)padding(内边距)margin(外边距)border(边框)。:

height():

用于设置或返回当前匹配元素的高度;
高度不包括元素的外边距(margin)、内边距(padding)、边框(border)等;
对不可见的元素依然有效;
还可获取 window、document 对象的高度:
$(window).height();   // 返回浏览器视口的高度
$(document).height(); // 返回 HTML 文档的高度

innerHeight()

用于设置或返回当前匹配元素的内高度;
内高度包括只元素的内边距(padding);
对不可见的元素依然有效;
不适用于获取 window、document 对象的高度;

outerHeight():

获取当前匹配元素的外高度;
外高度包括元素的内边距(padding)、边框(border);
outerHeight(true) 参数为 true 时包含外边距部分的高度,默认为 false 不包括;
对不可见的元素依然有效;
不适用于获取 window、document 对象的高度;

!!!

height()          高度为 height
innerHeight()     高度为 height+padding
outerHeight()     高度为 height+padding+border
outerHeight(true) 高度为 height+margin+padding+border

举例:

<div style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #666;"></div>
<script type="text/javascript">
    var div=$("div");
    console.log(div.height());          // 输出 100
    console.log(div.innerHeight());     // 输出 100+10+10=120
    console.log(div.outerHeight());     // 输出 100+10+10+1+1=122
    console.log(div.outerHeight(true)); // 输出 100+10+10+1+1+5+5=132
</script>

 转载自:

(846条消息) jQuery 获取元素的高度_卡尔特斯的博客-CSDN博客_jquery获取元素高度

posted @   SimoonJia  阅读(3326)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示