javascript中scrollHeight,scrollWidth,scrollLeft,scrolltop等区别小解

责任:葡京娱乐场.0267 栏目: 编程语言 发布于: 2014-05-09 11:55:06

感谢您百忙之中阅读本站文章,这里是葡京娱乐场.娱乐官方网,可以关注我们的文章公众号葡京娱乐场.pj32698,以下是文章内容,请注意用眼疲劳。

javascript中scrollHeight,scrollWidth,scrollLeft,scrolltop等区别小解,具体介绍以及使用方法如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js位子表示</title> 
<script type="text/javascript"> 
function testClick(oDiv){ 
var oDivId=document.getElementById(oDiv); 
alert("offsetHeight:"+oDivId.offsetHeight+"\n offsetWidth:"+oDivId.offsetWidth+"\n offsetLeft:"+oDivId.offsetLeft+"\n offsetRight:"+oDivId.offsetLeft+"\n offsetTop:"+oDivId.offsetTop 
+"\n offsetParent:"+oDivId.offsetParent +"\n scrollHeight:"+oDivId.scrollHeight+"\n scrollWidth:"+oDivId.scrollWidth+"\n scrollTop:"+oDivId.scrollTop+"\n scrollLeft:"+oDivId.scrollLeft+"\n " ); 
} 
</script> 
</head> 
<body style="margin:0; padding:0;"> 
<div style="width:300px; height:300px; padding:2px; margin:3px;"> 
<div id="t1" style="margin:1px; padding:4px ; border:3px solid #eeeeee; width:100px; height:200px; overflow:scroll; cursor:pointer;" onclick="testClick('t1')" > 
一般的通过mousedown、mousemove、mouseup等打造的拖动,仅仅在普通的键盘+鼠标的电脑设备上可以工作。而到了ios设备上(iphone itouch ipad),则不能工作了。最近因为做个东西,需要支持ios设备,所以只好看了下webkit浏览器的触摸事件。 
其实也很简单,对应mousedown、mousemove、mouseup的触摸事件分别是touchstart、touchmove、touchend。为了写个demo,花了不少的时间,所以为了节省时间,我文章里就不多说了,仅贴一下相关代码。 
</div> 
</div> 
</body> 
</html> 

ie(ie9,chrome,ff基本一致)中:
offsetHeight(返回元素的高度和宽度,以像素为单位,包含内边距):
200+4+4+3+3=214(自身200的高度+上下各为4的内边距+上下的各为3的border,注意不包括外边距)
offsetWidth(返回元素的高度和宽度,以像素为单位,包含内边距):
100+3+3+4+4=114 同上
offsetLeft(返回当前元素的左边界到它的包含元素的左边界的偏移量,以像素为单位):
2+3+1=6(ie6下为3)(父级div的内左边距2+父级div外左边距+3+子div左外边距+1,注意这里子div内边距是不会影响到offsetLeft)
没有offsetRight的概念。
offsetTop(返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位。)
2+3+1=6(ie6下为2)道理和offsetLeft一样
scrollHeight(返回元素的完整的高度和宽度,以像素为单位。当一个元素拥有滚动条时(比如由于 CSS 的 overflow:scroll 属性,如果为hidden,得到的只是能显示文字所能看到的高度)
474(div的实际的高度,由里面的文字来决定,overflow:scroll )
如果overflow:hidden,就只有390,其它的被隐藏了
如果去调overflow,就是390,为什么 overflow:scroll 却等于474呢?因为还包含了滚动条的高度
scrollWidth:(和scrollheight道理一样)
overflow:hidden值为108(子div实际的宽度)
overflow:scroll 值为90(这里为什么会这样?难道不包括滚动条的宽度?)
去掉overflow,值为108
scrolltop(返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量)
如果不拖动滚动条,默认的值为0;
scrollLeft同上

您可能感兴趣的文章

  • javascript判断鼠标左右键点击-兼容ie、firefox、chrome等各大主流浏览器
  • php中empty,is_null,isset的区别详解
  • window.navigate 与 window.location.href 的使用区别详解
  • PHP中跳出多重循环使用break,continue,goto,return,exit的用法和区别
  • css中border:none;与border:0;的区别
  • mysql中tinyint、smallint、int和bigint类型的用法区别
  • PHP中return 和 exit 、break和contiue 区别与用法
  • 详解display:inline;与float:left;的区别
本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。
转载请注明:文章转载自 [http://www.danrojas.com]
本文标题:javascript中scrollHeight,scrollWidth,scrollLeft,scrolltop等区别小解
IT技术书籍推荐:
JavaScript高级程序设计(第3版)
JavaScript高级程序设计(第3版)
泽卡斯 (Zakas. Nicholas C.) (作者), 李松峰 (译者), 曹力 (译者)
《JavaScript高级程序设计(第3版)》是JavaScript超级畅销书的最新版。ECMAScript 5和HTML5在标准之争中双双胜出,使大量专有实现和客户端扩展正式进入规范,同时也为JavaScript增添了很多适应未来发展的新特性。《JavaScript高级程序设计(第3版)》这一版除增加5章全新内容外,其他章节也有较大幅度的增补和修订,新内容篇幅约占三分之一。全书从JavaScript语言实现的各个组成部分——语言核心、DOM、BOM、事件模型讲起,深入浅出地探讨了面向对象编程、Ajax与Comet服务器端通信,HTML5表单、媒体、Canvas(包括WebGL)及Web Workers、地理定位、跨文档传递消息、客户端存储(包括IndexedDB)等新API,还介绍了离线应用和与维护、性能、部署相关的最佳开发实践。《JavaScript高级程序设计(第3版)》附录展望了未来的API和ECMAScript Harmony规范。
葡京娱乐场.最新互联网资讯
葡京娱乐场.互联网资讯

葡京娱乐场_进入葡京娱乐场.pj32698官方网站.0267