新葡亰496net 新葡亰编程 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth等之完全详解

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth等之完全详解



  • offsetTop、offsetLeft、offsetWidth、offsetHeight
  • scrollTop、scrollLeft、scrollWidth、scrollHeight
  • clientHeight、offsetHeight、scrollHeight

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

图片 1


scrollHeight: 获取对象的滚动高度。

假设 obj 为某个 HTML 控件

图片 2

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

obj.offsetTop 指 obj 相对于版面或由 offsetParent
属性指定的父坐标的计算上侧位置,整型,单位像素。

上面是一个网页,由于窗口大限的限制,没有完全显示出来,没有显示出来的,用阴影标注了。

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

obj.offsetLeft 指 obj 相对于版面或由 offsetParent
属性指定的父坐标的计算左侧位置,整型,单位像素。

  • 上阴影就是 scrollTop;
  • 上阴影 + 白的 + 下阴影就是 scrollHeight。

scrollWidth:获取对象的滚动宽度

obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow
而未显示的部分,也就是其实际占据的宽度,整型,单位像素。

scrollTop 是“卷”起来的高度值,示例:

offsetHeight:获取对象相对于版面或由父坐标 offsetParent
属性指定的父坐标的高度

obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow
而未显示的部分,也就是其实际占据的高度,整型,单位像素。

<div
style=”width:200px;height:200px;background-color:#999999;overflow:hidden;”
id=”p”>
  <div style=”width:100px;height:300px;background-color:#FFFF00;”
id=”t”>如果为 p 设置了
scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type=”text/javascript”>
<!–
var p = document.getElementById(“p”);
p.scrollTop = 10;
//–>
</script>

offsetLeft:获取对象相对于版面或由 offsetParent
属性指定的父坐标的计算左侧位置

我们对前面提到的 offsetParent 作个说明。

scrollTop、scrollLeft

offsetTop:获取对象相对于版面或由 offsetTop
属性指定的父坐标的计算顶端位置

offsetParent 获取定义对象 offsetTop 和 offsetLeft
属性的容器对象的引用。offsetTop 与 offsetParent
很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。

由于为外层元素 p(注意是 p,不是 t)设置了 scrollTop,所以内层元素会向上“卷”,这卷起来的部分就是 scrollTop。

event.clientX 相对文档的水平座标

以上属性在 FireFox 中也有效。

scrollLeft 也是类似道理。

event.clientY 相对文档的垂直座标

另外:我们这里所说的是指 HTML 控件的属性值,并不是
document.body,document.body
的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body
解释不同造成的,并不是由于对 offset 解释不同造成的)

scrollWidth、scrollHeight

event.offsetX 相对容器的水平坐标

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top
也是可以的,二者的区别是:

我们已经知道
offsetHeight
是自身元素的高度,而 scrollHeight 是内层元素的实际高度 + 外层元素 padding,包含内层元素的隐藏的部分。

event.offsetY 相对容器的垂直坐标

一、offsetTop 返回的是数字,而 style.top
返回的是字符串,除了数字外还带有单位:px。

上述中 p(注意是 p,不是 t)的 offsetHeight 为 200,而其 scrollHeight 为 300。如果 p
具有 padding,那么应该把 padding 算到 scrollHeight 中,但其
border、margin 不应计算在内。

document.documentElement.scrollTop 垂直方向滚动的值

二、offsetTop 只读,而 style.top 可读写。

scrollHeight 也是类似道理。

event.clientX+document.documentElement.scrollTop
相对文档的水平座标+垂直方向滚动的量

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

IE 和 FireFox 全面支持,而 Netscape 8(很老了) 和
Opera 7.6(很老了) 不支持
scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft
除外)。

  以上主要指IE之中,FireFox差异如下:

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与
style.height 也是同样道理。

相关阅读

IE6.0、FF1.06+:

clientHeight 大家对 clientHeight
都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

  • offsetTop、offsetLeft、offsetWidth、offsetHeight
  • document.body.scrollTop
    值总为0的解决方法

clientWidth = width + padding

offsetHeight IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

clientHeight = height + padding

scrollHeight IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于
clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

offsetWidth = width + padding + border

简单地说 clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight
都是网页内容高度,只不过当网页内容高度小于等于 clientHeight
时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于
clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight
滚动条加边框。scrollHeight 则是网页内容实际高度。

offsetHeight = height + padding + border

同理 clientWidth、offsetWidth 和 scrollWidth
的解释与上面相同,只是把高度换成宽度即可。

IE5.0/5.5:

说明 以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional
则意义又会不同,在 XHTML
中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的
DOCTYPE 来启用不同的解释器

clientWidth = width – border

scrollTop 是“卷”起来的高度值,示例:

clientHeight = height – border

复制代码 代码如下:

offsetWidth = width

<div
style=”width:100px;height:100px;background-color:#FF0000;overflow:hidden;”
id=”p”>
<div style=”width:50px;height:300px;background-color:#0000FF;”
id=”t”>如果为 p 设置了
scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type=”text/javascript”>
var p = document.getElementById(“p”);
p.scrollTop = 10;
</script>

offsetHeight = height

由于为外层元素 p 设置了
scrollTop,所以内层元素会向上卷,这卷起来的部分就是 scrollTop。

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图