js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍


Posted in Javascript onMay 16, 2012
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 #Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 #Javascript
JQuery选择器特辑 详细小结
May 14 #Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 #Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 #Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 #Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 #Javascript
You might like
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP中PDO的错误处理
2011/09/04 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
HTML的select控件美化
2017/03/27 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python读取properties配置文件操作示例
2018/03/29 Python
pandas重新生成索引的方法
2018/11/06 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python