微精选 > 运动·赛事 > 火龙果:clientHeight/scrollHeight/offsetHeight的区别 > 正文

火龙果:clientHeight/scrollHeight/offsetHeight的区别

html5开发 2017-02-15 10:32:31

火龙果:clientHeight/scrollHeight/offsetHeight的区别

这是一张经典的关于scroll,offset,client相关高度和宽度的示意图,有很多动画的基础基于这个,做个小记!


页(内容)可见区域宽:document.body.clientWidth

网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

网页可见区域宽:document.body.offsetWidth (包括边线的宽)

网页可见区域高:document.body.offsetHeight (包括边线的宽)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

屏幕可用工作区高度:window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth



【微信号】html5rd

【网站】huolg.net

html5开发是一个关注H5在跨平台,游戏和微信开发及微应用运营和推广的公众号


html5开发(html5rd)

看过本文的人还看过

特约作者

html5开发

人气:0
更新:2017-02-15 10:32:31

html5开发 html5开发

推荐阅读 ^o^


鲜娱       韩娱       娱评社
八卦       独家       滚动
内地       港台       欧美
日韩
视讯       综艺       剧评
八卦爆料          活动          段子