js获取宽高

广告合作

需要广告位置可以直接联系1272345426。

现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!如发现资源不能下载或者失效请联系QQ1272345426

久全技术网-www.52jqw.cn
久全技术网-www.52jqw.cn
摘要:JS获取页面宽高

网页可见区域宽: document.body.clientWidth  网页可见区域高: document.body.clientHeight  网页可见区域宽: document.body.offsetWidth (包括边线的宽)  网页可见区域高: document.body.offsetHeight (包括边线的高)  网页正文全文宽: document.body.scrollWidth  网页正文全文高: document.body.scrollHeight  网页被卷去的高: document.body.scrollTop  网页被卷去的左: document.body.scrollLeft  网页正文部分上: window.screenTop  网页正文部分左: window.screenLeft  屏幕分辨率的高: window.screen.height  屏幕分辨率的宽: window.screen.width  屏幕可用工作区高度: window.screen.availHeight  屏幕可用工作区宽度: window.screen.availWidth

在我本地测试当中:  在IE、FireFox、Opera下都可以使用  document.body.clientWidth  document.body.clientHeight  即可获得,很简单,很方便。  而在公司项目当中:  Opera仍然使用  document.body.clientWidth  document.body.clientHeight  可是IE和FireFox则使用  document.documentElement.clientWidth  document.documentElement.clientHeight  原来是W3C的标准在作怪啊  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

如果在页面中添加这行标记的话  在IE中:  document.body.clientWidth ==> BODY对象宽度  document.body.clientHeight ==> BODY对象高度  document.documentElement.clientWidth ==> 可见区域宽度  document.documentElement.clientHeight ==> 可见区域高度

在FireFox中:  document.body.clientWidth ==> BODY对象宽度  document.body.clientHeight ==> BODY对象高度  document.documentElement.clientWidth ==> 可见区域宽度  document.documentElement.clientHeight ==> 可见区域高度

在Opera中:  document.body.clientWidth ==> 可见区域宽度  document.body.clientHeight ==> 可见区域高度  document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)  document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)  而如果没有定义W3C的标准,则  IE为:  document.documentElement.clientWidth ==> 0  document.documentElement.clientHeight ==> 0  FireFox为:  document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)  Opera为:  document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)  真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。  有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720.  可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.  原因是: 在HTML 中, body

区别新旧标准的行是:  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>   

未经允许不得转载:作者:久全技术猿, 转载或复制请以 超链接形式 并注明出处 久全技术网
原文地址:《js获取宽高》 发布于2019-08-29

分享到:
赞(0) 打赏
久全技术网-aidezy.com 久全技术网-www.52jqw.cn
久全技术网-aidezy.com 久全技术网-www.52jqw.cn

评论 抢沙发

4 + 8 =


js获取宽高

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册