js中的宽度、高度、偏移量问题,offset、client、scroll

经常把这几个搞混淆,根据《JavaScript高级程序设计》第12章的内容简单总结下

1、offset,这个是偏移量,包括元素在屏幕上占用的所有可见的空间。包括所有内边距、滚动条和边框大小(注意:不包括外边距),有4个属性:offsetWidth、offsetHeight、offsetLeft、offsetTop。

  • offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、水平滚动条的高度、上边框高度和下边框高度。

  • offsetWidth:元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、垂直滚动条的宽度、左边框宽度和右边框宽度。

  • offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。

  • offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。

    其中,offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。例如,<td>元素的offsetParent是作为其祖先元素的<table>元素,因为<table>是在DOM层次中距<td>最近的一个具有大小的元素。

    要想知道某个元素在页面上的偏移量,将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,如此循环直至根元素,就可以得到一个基本准确的值。以下函数可用于取得元素的左偏移量:

offset

2、client,这个是客户区大小,指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个:clientWidth,clientHeight。

  • clientWidth:元素内容区宽度加上左右边距宽度;

  • clientHeight:元素内容区高度加上上下边距高度。

    从字面上看,客户区大小就是元素内部的空间大小,因此滚动条占用的空间不计算在内。要确定浏览器视口大小,可以使用document.documentElement或document.body(在IE7之前的版本中)的clientWidth和clientHeight。

client

3、scroll,滚动大小,指的是包含滚动内容的元素的大小。有四个相关属性:scrollHeight、scrollWidth、scrollLeft、scrollTop。

  • scrollHeight:在没有滚动条的情况下,元素内容的总高度;

  • scrollWidth:在没有滚动条的情况下,元素内容的总宽度;

  • scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

  • scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

    scrollWidth和scrollHeight主要用于确定元素内容的实际大小。例如,通常认为<html>元素是在Web浏览器的视口中滚动的元素(IE6之前版本运行在混杂模式下时是<body>元素)。因此,带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。

    对于不包含滚动条的页面而言,scrollWidth和ScrollHeight与clientWidth和clientHeight之间的关系并不十分清晰。在这种情况下,基于document.documentElement查看这些属性会在不同浏览器间发现一些不一致性问题,具体参考高程

敲得太累了,贴个其他网友总结的:

网页可见区域宽: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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值