js的client、scroll、offset详解与兼容性
clientWidth:可视区宽
说明:样式宽+padding
参考:js的client详解
scrollTop : 滚动条滚动距离
说明:chrome下他会以为滚动条是文档元素的,所以需要做兼容:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
参考:js的scroll详解
scrollHeight : 返回整个元素的高度+padding(包括子元素把父元素撑开隐蔽的地方)
参考:js的scroll详解
offsetHeight : 文档高度
说明:任何一个元素的高度+padding+border
ie下会把整个文档可视区作为高度,建议使用document.body.offsetHeight
offsetLeft: 返回当前元素的相对水平偏移位置的偏移容器
说明:找距离定位父级(position:relative)左边的距离,如果没有定位默认是body
参考:offsetLeft与offsetTop详解
offsetParent : 返回元素的偏移容器
说明: 找有定位的父节点,没有定位默认是body,ie7以下定位在当前元素是html
参考:offsetParent详解
js的client、scroll、offset详解与兼容性的更多相关文章
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...
- 微信JS接口汇总及使用详解
这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...
- js中中括号,大括号使用详解
js中中括号,大括号使用详解 一.总结 一句话总结:{ } 是一个对象,[ ] 是一个数组 1.js大括号{}表示什么意思? 对象 { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或 ...
- js对象浅拷贝和深拷贝详解
js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...
- amazeui中的js插件有哪些(详解功能)
amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...
- [荐]Js apply()和call()方法详解 - http://www.w3cfuns.com/article-5596443-1-1.html
本帖最后由 默默DE人生 于 2013-3-19 13:22 编辑 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文 ...
随机推荐
- 关于JNI的使用方法
1首先在java里面定义你需要的native方法 2打开cmd,进入doc窗口,如果是android项目就进入到你当前项目的bin目录下,在doc里面输入cd E:\workspace\Test1 也 ...
- 代码合并工具——Beyond Compare
由于公司现在人比较多,存在多个小组同时开发一个项目的情况.为避免不同小组之间代码的冲突,我们的SVN采用了打分支的情况. 这造成我们自己小组的内容上线后要合并到不同的分支和主干上去. 于是就找了这个合 ...
- 转:查看sql语句执行时间/测试sql语句性能
原文出处:http://www.cnblogs.com/qanholas/archive/2011/05/06/2038543.html 写程序的人,往往需要分析所写的SQL语句是否已经优化过了,服务 ...
- C#复习⑦
C#复习⑦ 2016年6月22日 11:50 Main Exception & Namespaces & Assemblies 异常 & 命名空间 & 程序集 1.tr ...
- 哭瞎!360云盘将关停,你的几十T照片和文件该怎么办
IDO老徐刚得到了一个非常不开心的消息,360云盘将停止个人云盘服务...进行业务转型,在网盘存储.传播内容的合法性和安全性得到彻底解决之前不再考虑恢复,之后转型企业云服务. 而且之前共享的所有资料, ...
- #研发解决方案介绍#Recsys-Evaluate(推荐评测)
郑昀 基于刘金鑫文档 最后更新于2014/12/1 关键词:recsys.推荐评测.Evaluation of Recommender System.piwik.flume.kafka.storm.r ...
- 用CSS3实现背景的固定
今天放假了,正好最近养成了没事泡泡博客园的习惯,自己也有了博客..不得不吐槽一下博客园为什么页面这么古朴,,带的几个模版也没啥意思,反正不符合我口味,幸亏后台提供了编辑CSS的功能,于是我就搬来现有的 ...
- ksvcreate: Process(m000) creation failed
一测试服务器数据库(Oracle Database 10g Release 10.2.0.5.0 - 64bit Production)突然访问不了,检查发现数据库处于挂起模式(hang mode), ...
- Spark SQL 之 Migration Guide
Spark SQL 之 Migration Guide 支持的Hive功能 转载请注明出处:http://www.cnblogs.com/BYRans/ Migration Guide 与Hive的兼 ...
- x01.Game.CubeRun: XACT3 播放声音
1.使用 Xact3 工具 在 DXSDK 安装目录 => Uilities => bin => x86 里,运行 Xact3.exe 程序,新建波形库(Wave Bank).声音库 ...