HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释

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

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

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

scrollWidth:获取对象的滚动宽度

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

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

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

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

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

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

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

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

event.clientX+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均无关)

onMouseover当鼠标经过的时候,触发 = 后面的脚本函数
onMouseout 当鼠标离开 。。
onMouseUP 当鼠标 按下又抬起。。。
onmousemove 当鼠标移动。。
onmousedown 当鼠标按下时。。


如果 obj 为某个 HTML 控件。


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


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


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


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


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


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


以上属性在 FireFox 中也有效。


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


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


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


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


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


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


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 的解释与上面同样,仅仅是把高度换成宽度就可以。


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


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,所以内层元素会向上卷,这卷起来的部分就是 scrollTop。


scrollLeft 也是相似道理。


我们已经知道 offsetHeight 是自身元素的宽度,而 scrollHeight 是内部元素的绝对宽度,包括内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。


scrollWidth 也是相似道理。


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

1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些測量不考虑不论什么通过样式表增加
元素中的页边距,边框等.


2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,假设不指定一个边框或者不定位改元素,他的值就是0.


3.scrollLeft,scrollTop:
假设元素是能够滚动的,能够通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不能够滚动的元素,这些值总是0.


4.scrollHeight,scrollWidth:
无论有多少对象在页面上可见,他们得到的是总体.


5.style.left:
定位元素与包括它的矩形左边界的偏移量


6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.由于属性的非像素值返回的是包括单位的字符串,比如,30px. 利用这个属性能够单独处理以像素为单位的数值.


7.style:posLetf:
返回定位元素左边界偏移量的数量值,无论对应的样式表元素指定什么单位.由于属性的非位置值返回的是包括单位的字符串,比如,1.2em  
   
top,pixelTop,posTOp这几个类比即可了.
LEFT:   为从左向右移的位置,即挂件距离屏幕左边缘的距离;
clientLeft   返回对象的offsetLeft属性值和到当前窗体左边的真实值之间的距离
offsetLeft   返回对象相对于父级对象的布局或坐标的left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向的x坐标
pixelLeft   设置或返回对象相对于窗体左边的位置
scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。
clientWidth 是对象可见的宽度,不包滚动栏等边线,会随窗体的显示大小改变。
 offsetWidth 是对象的可见宽度,包滚动栏等边线,会随窗体的显示大小改变。
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均无关)


offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包含滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置
scrollLeft:返回和设置当前横向滚动务的坐标值


<input type="button" value="点一下" onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script language="javascript">
function move()
{
var d=document.getElementById("d")
a=eval(20)
d.scrollLeft+=a
}
</script>


保存为网页,执行一下,点button,滚动栏移动
点击div,先弹出b相对于a的位置,再弹出a相对于窗体的位置

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释的更多相关文章

  1. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  2. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLe ...

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

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

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

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  5. scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动(冻结)的效果

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位 ...

  6. H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...

  7. 元素间距属性(scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin)

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  8. 完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径,滚动图片(网上找的,未经试验,但觉得比较好)

    获取元素的位置属性可以通过 HTMLElement.offsetLeft HTMLElement.offsetTop 但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其 ...

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

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

随机推荐

  1. [React] React Router: hashHistory vs browserHistory

    In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browse ...

  2. [React Testing] Children with Shallow Rendering

    When testing React components, we often want to make sure the rendered output of the component match ...

  3. MySQL数据库中的哈希加密

    数据库安全是数据库中最为重要的环节,只有确保了数据库中数据的安全,才能够更好的发挥数据库的功能,本文将为大家介绍一种很好的数据库加密方法,即哈希加密. 导读:MySQL数据库加密的方法有很多种,不同的 ...

  4. 3.1,pandas【基本功能】

    一:改变索引 reindex方法对于Series直接索引,对于DataFrame既可以改变行索引,也可以改变列索引,还可以两个一起改变. 1)对于Series In [2]: seri = pd.Se ...

  5. cocos2dx 帧动画(iOS)

    植物大战僵尸的植物摇摆效果 //帧动画 Animation *animation = Animation::create(); Sprite *sprite = Sprite::create(&quo ...

  6. 移动平台中 meta 标签的使用

    一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面 ...

  7. windows搭建redis记录

    windows安装redis:http://www.cnblogs.com/linjiqin/archive/2013/05/27/3101694.html 30个常用的redis命令:http:// ...

  8. 【Beta】Scrum10

    Info 最后一次Scrum会议(补发) 时间:2017.01.03 21:35 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:-- Task Report Nam ...

  9. 2016年最受欢迎中国开源软件TOP 20

    开源软件对程序员来说是一个经常接触的软件,作为一个经常接触的软件,当然想知道自己用的软件受欢迎程度,基于此,开源中国在近日公布“2016年度最受欢迎中国开源软件评选”结果,在TOP20榜单中,前5名分 ...

  10. Lintcode--003(乱序字符串)

    给出一个字符串数组S,找到其中所有的乱序字符串(Anagram).如果一个字符串是乱序字符串,那么他存在一个字母集合相同,但顺序不同的字符串也在S中. 注意事项 所有的字符串都只包含小写字母   样例 ...