clientHeight,offsetHeight,scrollHeight迷一样的三个值
https://blog.csdn.net/qq_39083004/article/details/78498178
https://www.imooc.com/article/17571 推荐
offsetLeft
一个元素的offsetLeft值,就是这个元素左边框外,到自己的offsetParent对象的左边框内的距离
什么是offsetParent对象?
每一个元素,天生都有一个属性,叫做offsetParent,表示自己的“偏移参考盒子”,我们不称呼中文,就叫offsetParent。这个offsetParent是谁呢?
就是自己祖先元素中,离自己最近的已经定位的元素,如果自己的祖先元素中,没有任何盒子进行了定位,那么offsetParent对象就是body。
op.offsetParent
无论这个盒子自己是否定位,自己的offsetParent就是按照上述方法寻找。
总结:
IE6、7 | IE8 | IE9、IE9+、高级浏览器 | |
offsetParent |
如果自己没有定位,那么就是自己父亲中有width或者有height或者有定位的元素。 如果自己有定位,那么就是和高级浏览器一致。 |
和高级浏览器一致 | 自己祖先元素中,离自己最近的已经定位的元素 |
offsetLeft | 和高级浏览器一致 | 多算一条border | 自己的border外到offsetParet对象的border内 |
offsetWidth和offsetHeight
全线兼容,是自己的属性,和别的盒子无关。
一个盒子的offsetWidth值就是自己的 width+左右padding+左右border的宽度
如果盒子没有宽度,那么所有浏览器都将把px值当做offsetWidth,而不是100%;
如果盒子没有高度,用文字撑的,所有浏览器都将把px值当做offsetHeight
clientWidth和clientHeight
全线兼容,就一丢丢IE6的问题
client表示“客户端”这里就是一个名字而已,不用在意这个名字。
clientWidth就是自己的width+padding的值。 也就是说,比offsetWidth少了border。
如果盒子没有宽度,那么那么所有浏览器都将把px值当做clientWidth,而不是100%
如果盒子没有高度,用文字撑的,IE6 clientHeight是0,其他浏览器都是数值。
卷动值scrollTop
页面的卷动值$(window).scrollTop();
窗口的高度$(window).height();
页面的总高度$(document).height();
页面的卷动值有一个范围:[0 , $(document).height() - $(window).height()];
也就是说,$(window).scrollTop() / ($(document).height() - $(window).height())一定是[0,1]。
clientHeight,offsetHeight,scrollHeight迷一样的三个值的更多相关文章
- clientHeight & offsetHeight & scrollHeight
clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- 关于body/documentElement ---->clientHeight, offsetHeight, scrollHeight
http://blog.csdn.net/woxueliuyun/article/details/8638427 http://blog.sina.com.cn/s/blog_9dd702d50101 ...
- clientHeight,offsetHeight与scrollHeight的相关知识
在html里,width与height是最常用也是最基础的两个属性,因此,在js里,我们也经常需要操作这两个属性.js关于这两个属性提供了client*,offset*与scroll*,很多同学搞不清 ...
- 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别
二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...
- 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览
平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.heigh ...
- offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
- 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分
1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件 function justAtest() { ...
- offsetHeight, clientHeight与scrollHeight的区别
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...
随机推荐
- #define的一个小技巧
/* atof example: sine calculator */ #include <stdio.h> /* printf, fgets */ #include <stdlib ...
- 最小费用流模板(zkw与spfa)
"zkw" 费用流算法在哪些图上慢(摘自https://www.cnblogs.com/ECJTUACM-873284962/p/7744943.html) 实践中, 上面的这个算 ...
- SP1825 【FTOUR2 - Free tour II】
# \(SP1825\) 看到没有人用老师的办法,于是自己写一下思路 思路第一步:排除旧方法 首先这道题和\(4178\)不一样,因为那道题是计数,而这道题是求最值,最值有个坏处,就是对于来自相同子树 ...
- Acwing P274 移动服务 题解
每日一题 day21 打卡 Analysis DP的状态为已经完成的请求数量,通过指派一位服务员可以把”完成i - 1个请求的状态”转移到”完成i个请求的状态”那么我们可以知道转移从dp[i - 1] ...
- jsp+ tinymce粘贴word
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
- Tyvj P2044 ["扫地"杯III day2]旅游景点
二次联通门 : Tyvj P2044 ["扫地"杯III day2]旅游景点 /* Tyvj P2044 ["扫地"杯III day2]旅游景点 并查集 先把大 ...
- 数组思维 -- join的一些用法感悟
组合字符串的时候, 组合 sql 的时候, 使用join 会非常有用, join and 记得前端时间去看面试题的时候, 总会出一个小的性能题目, 就是 如果有大量的字符串处理的时候, 怎么 ...
- 【MySQL 读书笔记】“order by”是怎么工作的?
针对排序来说,order by 是我们使用非常频繁的关键字.结合之前我们对索引的了解再来看这篇文章会让我们深刻理解在排序的时候,是如何利用索引来达到少扫描表或者使用外部排序的. 先定义一个表辅助我们后 ...
- fgets()函数
声明: char *fgets(char *str,int n,FILE* stream) 参数: str—这是指向一个字符数组的指针,该数组存储了要读取的字符串 n – 这是要读取的最大字符数(包括 ...
- A2T和T2A,===string和CString互转 方法一:--用宏的方式
USES_CONVERSION它是在堆栈上分配空间的,也就是说你在你在函数未结束就不会被释放掉.所有要注意不要在一个函数中用while循环执行它,不然栈空间就马上会分配完(栈空间一般只有2M,很小). ...