「jQuery」获取元素的高度
在jQuery中,获取元素高度的方法有3个:height()、innerHeight()、outerHeight();
顺带记一下元素的盒模型: height(高度), padding(内边距), margin(外边距), border(边框);
1. height()
用于设置或返回当前匹配元素的高度;
高度不包括元素的外边距(margin)、内边距(padding)、边框(border)等;
对不可见的元素依然有效;
还可获取window,document对象的高度,
$(window).height();// 返回浏览器视口的高度
$(document).height();// 返回HTML文档的高度
2. innerHeight()
用于设置或返回当前匹配元素的内高度;
内高度包括只元素的内边距(padding);
对不可见的元素依然有效;
不适用于获取window,document对象的高度;
3. outerHeight()
获取当前匹配元素的外高度;
外高度包括元素的内边距padding、边框border;
outerHeight(true)参数为true时包含外边距部分的高度,默认为false不包括;
对不可见的元素依然有效;
不适用于获取window,document对象的高度;
4. 总结
height() 高度为 height ,
innerHeight() 高度为 height+padding ,
outerHeight() 高度为 height+padding+border ,
outerHeight(true)高度为 height+margin+padding+border ;
5. 举个栗子
html:
<div style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #666;"></div>
JS:
<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>
6. 控制台输出
「jQuery」获取元素的高度的更多相关文章
- 每天一个JavaScript实例-获取元素当前高度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js进阶 11-8 jquery如何获取元素相对于父元素的位置
js进阶 11-8 jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...
- jquery如何获取元素的滚动高度
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(documen ...
- jquery中获取元素的几种方式小结
1 从集合中通过指定的序号获取元素 html: 复制代码代码如下: <div> <p>0</p> <p>1</p> <p>2&l ...
- jQuery如何获取元素及选择器的参考
获取元素 Jquery当中几乎所有的功能.选择.事件处理等都用到了这个函数.通常用来获取元素,获取到的元素都会被存储为jQuery对象. 例如: 先设定一个id为aaa的div <body> ...
- jquery获取元素对应高度
https://www.cnblogs.com/sntetwt/p/3823592.html 获取点击元素距离页面的高度 $(select).offset().top - $(document).sc ...
- 【jquery】获取元素高度
1. $("#div_id").height(); // 获得的是该div本身的高度, (不包含padding,margin,border)2. $("#div_id&q ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- jquery获取元素方式
1 从集合中通过指定的序号获取元素 html: <div> <p>0</p> <p>1</p> <p>2</p> & ...
随机推荐
- 最小 base64 图片
http://www.webhek.com/post/base64-encode-of-1x1px-transparent-gif.html Base64 Encode 1x1px透明GIF图片 Ba ...
- [转]Eclipse下开发Struts奇怪异常:org.apache.struts.taglib.bean.CookieTei
今天早上开始在Eclipse下学习struts,于是按照李兴华老师的<struts入门视频教程>一步一步地充满快乐的学习,等把登陆程序写完,打开浏览器准备运行的时候,奇怪的异常产生了,异常 ...
- P1622 释放囚犯
传送门 区间DP简介: 在写这题前,需要先弄清楚区间DP是如何操作的: 区间DP的做法还是相对固定的,没有其他类型DP的复杂多变.主要思想就是先在小区间进行DP得到最优解,然后再利用小区间的最优解合并 ...
- Spring boot @Scheduled(cron = "* * * * * *") cron表达式详解
//@Scheduled(cron = "0 0/15 * * * ?") //每15分钟触发一次 //@Scheduled(cron = "5/10 * * * * ? ...
- Promise的.then .catch
定义一个promise 调用promise 如果promise的状态为resolve 则 执行 .then 否则执行.catch 可以有多个.then 会按顺序执行 axios.post 可 ...
- JqueryValidate 表单验证插件
1.适用场景 表单 ( 支持自定义规则 ) 2.相关文章 jQuery Validate 3.实际问题 JqueryValidate表单相同Name不校验问题解决
- opencv4.0 cuda10 编译速度太慢
opencv4.0 cuda10 对比不带cuda的时候,编译速度太慢,主要卡在cuda的编译上. 参考http://answers.opencv.org/question/5090/why-open ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- telnet作用和 命令使用方法详解
什么是Telnet? 对于Telnet的认识,不同的人持有不同的观点,可以把Telnet当成一种通信协议,但是对于入侵者而言,Telnet只是一种远程登录的工具.一旦入侵者与远程主机建立了Telnet ...
- 最简单的解决Chrome浏览器主页被hao123、360和2345篡改的方法是什么
最简单的解决Chrome浏览器主页被hao123.360和2345篡改的方法是什么 一.总结 一句话总结:打开chrome的安装目录,将chrome.exe改成chrome1.exe即可,然后发送一个 ...