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>
转载自:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库