JavaSsript获取各种宽高的方法

 //屏幕的有效宽高
 window.screen.availWidth     
 window.screen.availHeight
 //屏幕的分辨率宽高
 window.screen.width     
 window.screen.height
 //网页可见区域宽高
 document.body.offsetWidth
 document.body.offsetHeight
 //body对象宽高
 document.body.clientWidth
 document.body.clientHeight  
 document.documentElement.clientWidth
 document.documentElement.clientHeight
 /*注:若body的padding值与margin值都设置为0则与网页可见区域值相同*/
 //网页被卷去的高左
 document.body.scrollTop 
 document.body.scrollLeft 
 document.documentElement.scrollTop
 document.documentElement.scrollLeft
 //屏幕可用工作区域宽高
 window.screen.availHeight 
 window.screen.availWidth 
 //网页正文全文宽高:
 document.body.scrollWidth 
 document.body.scrollHeight 
 //网页正文部分上
 window.screenTop 
 window.screenLeft 

 //HTML精确定位
 //获取对象的滚动高度
 scrollHeight
 //设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
 scrollLeft
 //设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
 scrollTop
 //获取对象的滚动宽度
 scrollWidth
 //获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的计算左侧位置与顶端位置
 offsetLeft
 offsetTop
 //相对文档的水平坐标 垂直坐标
 event.clientX 
 event.clientY 
 //相对容器的 水平坐标 垂直坐标
 event.offsetX 
 event.offsetY  
 //垂直方向滚动的值
document.documentElement.scrollTop  

//浏览器差异

IE,FireFox 差异如下:
  IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(注:CSS中的margin属性与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度,innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度,表示HTML文档所在窗口的当前宽度。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值