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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
jquery 图片轮换效果
2010/07/29 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
详细解读Python中的__init__()方法
2015/05/02 Python
python导入时小括号大作用
2017/01/10 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Pycharm小白级简单使用教程
2020/01/08 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
商场营业员岗位职责
2015/04/14 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
解决mysql的int型主键自增问题
2021/07/15 MySQL
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
Python基础 括号()[]{}的详解
2021/11/07 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL