javascript中offset、client、scroll的属性总结


Posted in Javascript onAugust 13, 2015

HTML元素有几个offset、client、scroll开头的属性,总是让人摸不着头脑。在书中看到记下来,分享给需要的小伙伴。主要是以下几个属性:

第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent

   第二组:clientWidth,clientHeight,clientLeft,clientTop

第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop

详细定义如下:

1.1 HTML元素的offsetWidth,offsetHeight以CSS像素返回它的屏幕尺寸,包含元素的边框和内边距,不包含外边距。

1.2 offsetLeft和offsetTop属性返回元素的X和Y坐标。通常,它们返回值即是文档坐标。但对于已定位元素的后代元素和一些其他元素(如表格单元),这些属性返回的坐标是相对于祖先元素的而非文档。

1.3 offsetParent属性指定offsetLeft,offsetTop相对的父元素。如果offsetParent为null,后两者的返回值则为文档坐标。因此一般来说,用offsetLeft和offsetTop来计算元素e的位置需要一个循环:

//计算元素的文档坐标
function getElementPosition(e){
  var x=0,y=0;
  while(e !=null){
    x +=e.offsetLeft;
    y +=e.offsetTop;
    e=e.offsetParent; 
  }
  return {x:x, y:y} ;  
}

该方法计算的位置也不总是正确的,推荐使用内置的getBoundingClientRect()方法。

2.1 clientWidth和clientHeight类似于offsetWidth和offsetHeight属性,不同的是它们不包含边框大小,只包含内容和内边距。同时,如果浏览器在内边距和边框之间添加了滚动条,clientWidth和clientHeight的返回值也不包含滚动条。注意,对于类型<i>,<code>和<span>这些内联元素,clientWidth和clientHeight总是返回0。

2.2 clientLeft和clientTop返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离,通常这些值就等于左边和上边的边框宽度。但是如果元素有滚动条,并且浏览器将这些滚动条旋转在左侧或顶部,他们就还包含了滚动条的宽度。对于内联元素,它们总是为0。通常clientLeft和clientTop用处不大。

3.1 scrollWidth和scollHeight是元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当内容正好和内容区域匹配而没有溢出时,这些属性与clientWidth和clientHeight是相等的。但当溢出时,它们就包含溢出的内容,返回值比clientWidth和clientHeight要大。

3.2 scrollLeft和scrollTop指定元素的滚动条的位置。注意,scrollLeft和scrollTop是可写的,通过设置它们来让元素中的内容滚动(HTML元素并没有类似Window对象的scrollTo()方法)。

obj.offset[WidthHeightTopLeft]  取控件相对于父控的位置
event.offset[XY] 取鼠标相在触发事件的控件中的坐标
event.screen[XY] 鼠标相对于屏幕坐标
event.client[XY] 鼠标相对于网页坐标在在
obj.scroll[WidthHeightTopLeft] 获取对象滚动的大小
obj.client[WidthHeightTopLeft] 获取对象可见区域的大小

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div{
font-family: "宋体";
font-size: 12px;
color: #000000;
}
#div1{
position:absolute;
background-color:#f0f0f0;
width:200px;
height:200px;
left:20px;
top:0px;
z-index:1;
}
#div2{
background-color:#cfc0cf;
width:200px;
height:210px;
position:absolute;
left:261px;
top:347px;
z-index:100;
}
#div3{
background-color:#abbfbf;
width:200px;
height:200px;
position:absolute;
left:20px;
top:247px;
z-index:100;
}
#div4{
background-color:#cfcfcf;
width:200px;
height:200px;
position:absolute;
left:461px;
top:147px;
z-index:100;
}
-->
</style>
</head>
<body>
<div id='div1' >offset 控件相对于父窗体的位置</div>
<script>
function offset(ids){
ids.innerHTML="offsetLeft ="+ids.offsetLeft+"<BR>";
ids.innerHTML+="offsetWidth ="+ids.offsetWidth+"<BR>";
ids.innerHTML+="offsetHeight ="+ids.offsetHeight+"<BR>";
ids.innerHTML+="offsetTop ="+ids.offsetTop+"<BR>";
ids.innerHTML+="event.offset 鼠标相对于控件的位置<BR>";
ids.innerHTML+="offsetX ="+event.offsetX+"<BR>";
ids.innerHTML+="offsetY ="+event.offsetY+"<BR>";
}
function screen(ids){
ids.innerHTML="scrollWidth ="+ids.scrollWidth+"<BR>";
ids.innerHTML+="scrollHeight ="+ids.scrollHeight+"<BR>";
ids.innerHTML+="scrollTop ="+ids.scrollTop+"<BR>";
ids.innerHTML+="scrollLeft ="+ids.scrollLeft+"<BR>";
}
function client(ids){
ids.innerHTML="clientWidth ="+ids.clientWidth+"<BR>";
ids.innerHTML+="clientHeight ="+ids.clientHeight+"<BR>";
ids.innerHTML+="clientTop ="+ids.clientTop+"<BR>";
ids.innerHTML+="clientLeft ="+ids.clientLeft+"<BR>";
}
function eventc(ids){
ids.innerHTML="鼠标相对于屏幕坐标<BR>event.screenX="+event.screenX+"<BR>";
ids.innerHTML+="event.screenY ="+event.screenY+"<BR>";
ids.innerHTML+="鼠标相对于网页坐标event.clientX="+event.clientX+"<BR>";
ids.innerHTML+="event.clientY ="+event.clientY+"<BR>";
}
</script>
</body>
</html>

各浏览器都有这些属性,有些值可能不一样。

自己写代码,对比一下结果,就明白了。

Javascript 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
Javascript 解疑
Nov 11 Javascript
基于jquery的放大镜效果
May 30 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
jQuery事件用法详解
Oct 06 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 #Javascript
asp.net中oracle 存储过程(图文)
Aug 12 #Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 #Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 #Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 #Javascript
基于jQuery实现动态数字展示效果
Aug 12 #Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 #Javascript
You might like
php设计模式之委托模式
2016/02/13 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
详解vue中axios的封装
2018/07/18 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python实现八大排序算法
2016/08/13 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
提高python代码运行效率的一些建议
2020/09/29 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
优秀学生干部推荐材料
2014/02/03 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
绵山导游词
2015/02/05 职场文书
股东协议书范本2016
2016/03/21 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
Win11查看设备管理器
2022/04/19 数码科技