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详解与兼容性的更多相关文章

  1. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  2. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  3. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  4. ext.js的mvc开发模式详解

    ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...

  5. 微信JS接口汇总及使用详解

    这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...

  6. js中中括号,大括号使用详解

    js中中括号,大括号使用详解 一.总结 一句话总结:{ } 是一个对象,[ ] 是一个数组 1.js大括号{}表示什么意思? 对象 { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或 ...

  7. js对象浅拷贝和深拷贝详解

    js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...

  8. amazeui中的js插件有哪些(详解功能)

    amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...

  9. [荐]Js apply()和call()方法详解 - http://www.w3cfuns.com/article-5596443-1-1.html

    本帖最后由 默默DE人生 于 2013-3-19 13:22 编辑 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文 ...

随机推荐

  1. Scrum三大角色特点

    灵感来自于一段冷笑话: 一天,一头猪和一只鸡在路上散步,鸡看了一下猪说,“嗨,我们合伙开一家餐馆怎么样?”,猪回头看了一下鸡说,“好主意,那你准备给餐馆起什么名字呢?”,鸡想了想说“餐馆名字叫火腿和鸡 ...

  2. linux 中的 tar 解压

    Type at the command prompt tar xvzf file-1.0.tar.gz - tgfo uncompress a gzip tar file (.tgz or .tar. ...

  3. 对js中Function的浅见

    它到底是什么 String Array 都是系统内置对象(已经定义好,可以直接使用)当然,这货也是一样,我们之前定义的函数,其实就是一个这货的实例. 在JS中,所有的对象都是由函数实现的,函数的数据类 ...

  4. JAVA 8 默认方法-Default Methods

    什么是默认方法-Default Methods 简单的说,就是可以在接口中定义一个已实现方法,且该接口的实现类不需要实现该方法: 如下示例: interface GreetingService { v ...

  5. PHP 5.3.0以上推荐使用mysqlnd驱动

    1. 什么是 mysqlnd 驱动 ? PHP 手册上的描述 : MySQL Native Driver is a replacement for the MySQL Client Library ( ...

  6. RabbitMQ入门教程——.NET客户端使用

    众所周知RabbitMQ使用的是AMQP协议.我们知道AMQP是一种网络协议,能够支持符合要求的客户端应用和消息中间件代理之间进行通信. 其中消息代理扮演的角色就是从生产者那儿接受消息,并根据既定的路 ...

  7. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  8. Attribute 用法

    public class Program { //定制特性也可以应用在其他定制特性上, //应用AttributeUsage,来控制如何应用新定义的特性 [AttributeUsage(Attribu ...

  9. python异常

    Std 异常 异常名 描述 1 Exception 所有的异常 2 StopIteration 迭代器的next()方法不指向任何对象 3 SystemExit sys.exit() 函数执行 4 S ...

  10. hdu 5057 Argestes and Sequence(分块算法)

    Argestes and Sequence Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...