js中offsetTop、clientTop、scrollTop

Js中的offsetTop、clientTop、scrollTop各属性介绍

页可见区域宽:
document.body.clientWidth;
 /document.documentElement.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;

插曲:document.body
docuemnt.document.documentElement的比较

document.body是DOM中Document对象里的body节点,
document.documentElement是文档对象根节点(html)的引用。
    
IE在怪异模型(quick mode)下document.documentElement无法正确取到clietHeight
scrollHeight等值,比如clietHeight=0。可以见IE的怪异模    
 型并没有把html作为盒子模型的一部分,好在现在很少使用怪异模型。(注:如果页面没写DTD或写的不对,IE6默认使用怪异模型解析页面)

document.body.scrollHeight和document.documentElement.scrollHeight的区别:

document.body.scrollHeight是body元素的滚动高度,document.documentElement.scrollHeight为页面的滚动高度,且
document.documentElement.scrollHeight在IE和Firefox下还有点小差异。
     IE :
document.documentElement.scrollHeight = document.body.scrollHeight + marginTop
bottom高度 + 上下border宽度
     firefox :
document.documentElement.scrollHeight = document.body.scrollHeight + marginTop
bottom高度

1、offset

obj 为某个 HTML 控件。

obj.offsetTop 指 obj
距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj
距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

offsetTop 与 style.top 的区别

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

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

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

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

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

2、clientHeight

clientHeight

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

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight

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

NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

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

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight
则是网页内容实际高度。

同理

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

但是

FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同, xhtml 1 trasitional
中则不是如上解释的。其它浏览器则不存在此问题。

标题:scrollTop、scrollLeft、scrollWidth、scrollHeight

3、scrollLeft

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

<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>

由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。

scrollLeft 也是类似道理。

我们已经知道 offsetHeight 是自身元素的宽度。

而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。

上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。

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

4、clientLeft

返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离,可以理解为边框的长度

一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法很迷糊,花了一天的时间好好的学习了一下.得出了以下的结果:

1.offsetTop     :

当前对象到其上级层顶部的距离.

不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.。。。。。。

2.offsetParent   :

当前对象的上级层对象.

注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.

3.scrollLeft :

对象的最左边到对象在当前窗口显示的范围内的左边的距离.

即是在出现了横向滚动条的情况下,滚动条拉动的距离.

例子:

div.scrollTop = div.scrollHeight;
 使滚动条滚动到最后

设置div显示滚动条

垂直滚动条
     
设置是否显示滚动条主要是在CSS中设置下列的属性:

overflow: visible | auto | hidden | scroll
overflow-x:横向滚动条
overflow-y:纵向滚动条

参数的意义: 
visible :
 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。
auto :
 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 
hidden :  不显示超过对象尺寸的内容
scroll
:  总是显示滚动条 
overflow:auto; 这个表示当你内容超过div高度出现垂直的滚动条

js中offsetTop、clientTop、scrollTop,布布扣,bubuko.com

时间: 2024-10-08 11:45:14

js中offsetTop、clientTop、scrollTop的相关文章

JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

javascript中制作滚动代码的常用属性 页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHe

javascript中top,clientTop,scrollTop,offsetTop用法

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth     (包括边线的宽); 网页可见区域高: document.body.offsetHeight   (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高

JS中clientWidth,offsetWidth,scrollTop等含义

1. offsetWidth 当前对象的宽度2.offsetHeight 当前对象的高度3.offsetLeft 当前对象到其上级层左边的距离.不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性. 4.offsetTop 当前对象到其上级层顶部边的距离.不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性 5.scrollWidth:获取对象的滚动宽度 . 6.scrollHeight: 获取对象的滚动高度. 7.scrollLeft:设置或获取位于对

关于js中 document.body.scrollTop 不能返回正确值的原因

本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素,但是不管滚动条在什么位置总是返回是0,造成这样的原因和html的头部声明有关,如果头部声明 为:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">,这样肯定得到的结果是 0,如果该为<!DOCTYPE

关于js中的scrollTop

最近想写一个信息滚动的demo,但是一直没有实现,最后查找资料,看了网上的一些例子,之后才明白原因:没有清楚scrollTop的真正含义 html代码: <div class="info-area" id="area">              <ul id="list">                     <li><a href="">菲律宾渔民拖走黄岩岛附近多个中国浮

图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)【转】

源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo的scrollTop或者scrollLeft达到滚动的目的,当demo1与demo2的交界处滚动至demo顶端时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的. 代码如下:  <DIV id=demo

js中的各种宽高以及位置总结

在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间 实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 第一部分:DOM对象 1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和client

js中不同的height, top的对比

每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到这些已经不值一两次了,然后每次都要查看一下各自的区别,才能决定使用哪个. 今天特地花了一点时间整理了下各自的区别,本篇主要以chrome为准,可能各个浏览器之间还是有一些区别,但很多自己还未真正遇到过,还不是很清楚,等以后碰到了类似的兼容性问题,再记录到这里,这次就chrome浏览器中各个属性的区别

js中尺寸类样式

js中尺寸类样式 一:鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width 1:检测相对于浏览器的位置:event.clientX/event.clientY client:整个浏览器的可视区域,当点击鼠标的时候,鼠标事件发生的位置距离浏览器可视区域的左边和上边的距离 clientX:鼠标事件发生的位置距离浏览器可视区域的左边的距离 clientY:鼠标事件发生的位置距离浏览器可视区域的上边的距离 2: