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时,非常的模糊,看也看不懂,最近在网上看到一些文 ...
随机推荐
- LBS上传到百度地图
准备: 第一步:注册百度地图开发者账号 第二步:使用开发者账号注册相对应秘钥 在LBS后台添加所需要上传的字段 1,添加WebClientHelper帮助类 2,LBS帮助类 private stri ...
- Android 播放在线视频
首先开启电脑上的tomcat,将视频文件放在Tomcat 7.0\webapps\ROOT中 不用修改代码,直接输入地址即可,运行如下: 播放在线视频,必须要求手机支持当前的格式,才可以播放 播放的原 ...
- Swift-Switch穿透
switch vegetable { case "celery": print("Add some raisins and make ...
- Mac wifi已打开但尚未连接到网络
把网络偏好设置 里面的询问新网络 关闭了 然后 重启电脑 试一下 应该就可以了
- iOS 中内存分配与分区
关于RAM ROM RAM与ROM就是具体的存储空间,统称为存储器 RAM(random access memory):运行内存,CPU可以直接访问,读写速度非常快,但是不能掉电存储.它又分为: 动态 ...
- 结对编程-地铁续(有种上个学期OO的既视感)
我们组比较特殊..三人结对 github:https://github.com/qingchanghan/WPFUI_Metro po一张照片: 石浩然,韩青长.陈彦吉 (台式机真的很高端,分屏贼帅) ...
- Aptana Studio 3 汉化简体中文版
最近开始学习ruby on rails了,同事推荐我用aptana这个编辑器,它对ror的支持比较好,所以安装了这个软件,但是发现都是英文的,所以在网上看汉化教程,幸亏有高手写过这个文章了,这里我只是 ...
- ArrayList
各种原因,前两年做C语言去了,现在重新做JAVA, 感觉自己基础很不扎实,要好好学习啦, 先从简单的开始~ 以下内容基于jdk1.7.0_79源码: 什么是ArrayList 可以简单的认为是一个动态 ...
- mysql自动备份维护shell脚本 (copy)
#!/bin/bash #Mysql 自动备份 压缩并上传到 指定ftp #设想每天凌晨3点备份mysql #编辑crontab配置文件 # * * * backupmysql.sh #压缩并以&qu ...
- MySQL创建索引语法
1.介绍: 所有mysql索引列类型都可以被索引,对来相关类使用索引可以提高select查询性能,根据mysql索引数,可以是最大索引与最小索引,每种存储引擎对每个表的至少支持16的索引.总索引长度为 ...