- 浏览: 933933 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (383)
- JSP 自定义标签实现 (1)
- JSP (2)
- javascript (161)
- JAVA (100)
- HTML (26)
- jQuery (11)
- J2EE (1)
- Log4J (1)
- HTML5 (6)
- DB2 (2)
- Spring (14)
- 浏览器兼容 (1)
- JavaMail (1)
- JAVA(转载) (1)
- freemarker (1)
- 项目管理 (1)
- 项目架构学习 (1)
- Oracle (11)
- 开源项目 (2)
- 网络编程 (4)
- C (1)
- C++ (0)
- Xpath (1)
- 待写 (10)
- JXL (1)
- XML (1)
- JNDI (2)
- POI (8)
- Struts2 (3)
- 异常解决方法 (1)
- Sql Server (2)
- windows (2)
- SqlServer (1)
- 前端 (1)
- 正则表达式 (2)
- 浏览器兼容问题 (2)
- 转载 (25)
- css (11)
- svn (5)
- 工程构建 (1)
- 好用的网站 (1)
- sql (3)
- chrome V8 (1)
- javacript 报表 (1)
- FusionCharts (1)
- eclipse (2)
- tomcat (4)
- hibernate (2)
- 硬件 (1)
- 杂烩 (1)
- Linux (1)
- ubuntu (1)
- 设计模式 (2)
- 缓存 (1)
- 数据库 (1)
- JVM (2)
- DOM4j (1)
- 其他 (1)
- JACOB (1)
- extjs (3)
- ligerUi (1)
- 在线HTML编辑器 (1)
- API (1)
- OpenOffice (1)
- webservice (1)
- json (1)
- 百度map (1)
- NodeJs (1)
- greeplum jdbc spring (1)
- easyui (1)
- hightchart (1)
- 游戏 (1)
- HttpClient (1)
- 正则 (1)
- canvas (4)
- HTML5,javascript,canvas (0)
最新评论
-
changelo:
缺少了秦皇岛市
中国省,市,区 json数据 -
yurui829:
解析配置行那等号前后有可能有空格,改为如下比较好:String ...
java 读取.ini配置文件工具类 -
贝塔ZQ:
poi生成excel文档,感觉蛮复杂的,可以试试用pageof ...
POI生成excel带下拉 -
langke93:
我发现greenplum 通过jdbc insert性能很差, ...
jdbc 配置连接greeplum数据,spring配置连接greeplum数据(简单配置学习) -
zhutulang:
哪有收邮件???
Spring 邮件接收发送实例
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解 分类: js 2008-10-21 11:50 10751人阅读 评论(5) 收藏 举报 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> 保存为网页,运行一下,点按钮,滚动条移动 点击div,先弹出b相对于a的位置,再弹出a相对于窗口的位置
发表评论
-
微信2.0分享自定义标题、图片、摘要、链接
2016-01-28 11:00 1074今天做了一个微信自 ... -
js验证正则大全
2015-06-30 13:41 857var regexEnum = { intege:& ... -
javascript判断字符串是否是回文的算法实现
2014-11-24 22:40 3782var str = "reaaer&qu ... -
HTML5学习记录-----canvas学习之动画快照
2014-11-24 21:33 1122canvas动画快照 欢迎大家有好点建议可以提。js高级 ... -
HTML5学习记录-----canvas学习之鼠标选取放大图像
2014-11-23 21:53 1333canvas鼠标选取放大 欢迎大家有好点建议可以提。js ... -
HTML5学习记录-----canvas学习之获取鼠标在canvas上的坐标位置
2014-11-22 20:44 4720canvas坐标 欢迎大家有好点建议可以提。js高级扣扣 ... -
ajax.js
2014-11-20 21:38 1035如果你是 javascript高手,请来这里吧 ... -
html5 规范中新增的api
2014-11-20 21:36 4787如果你是 javascript高手,请来这里吧,扣扣群 1 ... -
被Arguments对象坑了。
2014-11-14 20:47 815当判断一个对象是否是Arguments对象时,我们会这么写 ... -
input onpaste事件
2014-11-12 14:08 10277function afterPaste() { ... -
javascript正则表达式学习——顺序肯定环视,顺序否定环视
2014-11-02 00:43 4624//举例说明。 //经常看到有人为了给数字加千分号(,) ... -
javascript小工具之——cookie操作
2014-11-01 20:28 1173var docCookies = { getItem: ... -
javascript本地缓存之localStorage,sessionStorage等
2014-10-28 11:00 2230如果你是 javascript高手,请来这里吧,扣 ... -
javascript本地缓存之userData(ie专用)
2014-10-27 23:28 844/** *storage 对象 */ functi ... -
javascript 排序,分组小工具 - 支持JSON数组 原生数组(学习,持续更新)
2014-10-24 10:38 6008/** * @author wsf 数据分组,排序js ... -
javascript 计算两日期之间的天数
2014-10-17 10:42 968var d1 = new Date('2013-01-01' ... -
web版2048小游戏 --- 学习用
2014-09-16 15:18 853web版2048小游戏 --- 学习用 -
javascript 将HTML转为 word,pdf 等(ie)
2014-08-18 12:26 3636/** * @author wsf html转换工具 ... -
javascript实现的各种排序性能比较
2014-08-01 09:33 1106<!DOCTYPE html> <htm ... -
javascript自动补全 支持键盘上下键 可以自定义数据,处理函数
2014-07-25 10:58 1377/** * @author wsf(自动补全动补全 支 ...
相关推荐
其实我们轮播的原理和以前相同,都是通过改变元素的位置来控制图片的出现,但让我们不是很上手的,是那些用于跟踪触摸的属性。 下面,我简单介绍一下与触摸相关的知识 触摸事件 touchstart:当手指触摸屏幕时触发,...
鼠标放在一个连接上,会显示图片(类似tooltip) 使用microsoft.web.ui.webcontrols的TabStrip与IFame组件,达到页的切换效果 HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
Java数组倒置 简单 Java图片加水印,支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印...
Java数组倒置 简单 Java图片加水印,支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印...
在ASP.Net课程的一开始,不是直接教学员怎么拖ASP.Net控件进行快速开发,而是通过ashx的模式开发原始的动态网站,让学员明白“请求—处理—响应模型”、“Http协议、Http无状态”、“c#代码渲染生成浏览器端...
8.2.3 实现接口的类 131 8.2.4 继承的类的方法 132 8.3 键盘事件 132 8.3.1 键盘事件程序示例 132 8.3.2 键盘事件的各种属性 134 8.4 鼠标事件 136 8.4.1 鼠标事件程序示例 136 8.4.2 鼠标事件的各种...
26.1.2ActionScript与JavaScript交互 566 26.1.3ActionScript与桌面程序交互 567 26.2网页脚本交互示例 568 26.3桌面应用交互示例 571 26.4小结 573 第27章ActionScript打印控制 574 27.1使用打印作业对象 574 ...