HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
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: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之全然具体解释的更多相关文章
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLe ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...
- 转 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...
- scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动(冻结)的效果
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位 ...
- H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...
- 元素间距属性(scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin)
scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...
- 完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径,滚动图片(网上找的,未经试验,但觉得比较好)
获取元素的位置属性可以通过 HTMLElement.offsetLeft HTMLElement.offsetTop 但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其 ...
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...
随机推荐
- Intent MIME 打开各种类型的文件
使用 public class MainActivity extends ListActivity { public static final String path = Environmen ...
- overcast
关于一个利用relative的简单布局,firefox上出现一点问题,暂且不明原因 firefox的 chrome的 代码记录 <!DOCTYPE html> <html lang= ...
- (转)ASP.NET版本的Kindeditor插件的使用(同步)
昨天老大让我自己下载一个kindeditor说要放到“描述”功能中,并且不能提交(一边在textarea中写一边在label控件中将数据显示出来),由于从来没弄过,实在费了一翻劲.所以将此记录下来,一 ...
- Android WiFiDirect 学习(二)——Service Discovery
Service Discovery 简介 在Android WifiDirect学习(一 )中,简单介绍了如何使用WifiDirect进行搜索——连接——传输. 这样会有一个问题,那就是你会搜索到到附 ...
- Dom4j之xPath
XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointe ...
- 捷易拍与springMVC系统结合
1. 捷易拍高拍仪在jsp页面的调用 使用ActiveX插件的方式处理解决此问题,捷易拍公司提供了支持IE8以上的32位浏览器的插件,安装插件后,我们可以使用Object标签,使用高拍仪 注意: 1. ...
- 公众号的秘密,知道一个biz就够了
公众号的秘密,知道一个biz就够了 微信对于我来说,最有价值的是一个学习渠道,特别是搜狗微信搜索(http://weixin.sogou.com/)能够很方便的搜索公众账号和文章内容,PC端就能够获得 ...
- 各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight
1..position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移,返回.position().le ...
- PHP+MySQL Smarty简单分页显示示例
一.分页程序的原理 分页程序有两个非常重要的参数:每页显示几条记录($pagesize)和当前是第几页($page). 有了这两个参数就可以很方便的写出分页程序,我们以MySql数据库作为数据源,在m ...
- HTML5比较实用的代码
增强IE兼容性 <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js&q ...