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详解

转载于:https://www.cnblogs.com/gongshunkai/p/5839636.html

js的client、scroll、offset详解与兼容性相关推荐

js showModalDialog参数的使用详解（转）
js showModalDialog参数的使用详解_javascript技巧_脚本之家 http://www.jb51.net/article/45281.htm 本篇文章主要是对js中showMod ...
[js]JavaScript Number.toPrecision() 函数详解
[js]JavaScript Number.toPrecision() 函数详解 JavaScript: numberObject.toPrecision( [ precision ] ) 如果没有提 ...
mysql57数据库命令_MySQL 5.7 mysql command line client 使用命令详解
MySQL 5.7 MySQL command line client 使用命令 1.输入密码:****** 2.ues mysql;使用Mysql 3.show databases;显示数据库 4. ...
node mysql 查询_Node.js使用mysql进行查询详解
本篇教程介绍了Node.js使用mysql进行查询详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < 因为返回的是个对象 var selectSql1=&quo ...
js中小括号()的用法详解
一.js中小括号()的用法详解 1.作为分组运算符: 分组运算符应该是再熟悉不过了,因为在小学数学中就有应用,例如: var a=(1+2)*4; console.log(a); 以上代码的输出值是1 ...
js购物车功能php,使用JS实现购物车功能步骤详解
这次给大家带来使用JS实现购物车功能步骤详解,使用JS实现购物车功能的注意事项有哪些,下面就是实战案例,一起来看一下. 我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪 ...
JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...
js中indexOf的用法详解
js中indexOf的用法详解 String.IndexOf 方法 (Char, [startIndex], [count]) 报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检 ...
html5局部放大图片,js实现图片局部放大效果详解
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...

js的client、scroll、offset详解与兼容性

js的client、scroll、offset详解与兼容性相关推荐

最新文章

热门文章