脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript中offset、client、scroll的属性总结

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

 更新时间：2015年08月13日 09:00:22   投稿：hebedich  
这篇文章主要介绍了javascript中offset、client、scroll的属性总结的相关资料,需要的朋友可以参考下

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>

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

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

您可能感兴趣的文章:

相关文章

  • 找到了一篇jQuery与Prototype并存的冲突的解决方法

    找到了一篇jQuery与Prototype并存的冲突的解决方法

    找到了一篇jQuery与Prototype并存的冲突的解决方法...
    2007-08-08
  • JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能]，同时发布了V1.0beta版的快捷留言功能和源代码，之所以是beta版，就是当时感觉虽然基本功能有了，但是还不够完善，特性也不一定合理
    2010-04-04
  • JS对象的深度克隆方法示例

    JS对象的深度克隆方法示例

    这篇文章主要介绍了JS对象的深度克隆方法,结合实例形式分析了JavaScript深度克隆的实现技巧,需要的朋友可以参考下
    2017-03-03
  • Javascript将字符串日期格式化为yyyy-mm-dd的方法

    Javascript将字符串日期格式化为yyyy-mm-dd的方法

    日期格式化相信对于大家来说再熟悉不过，最近工作中自己利用Javascript就写了一个，现在将实现的代码分享给大家，希望对有需要的朋友们能有所帮助，感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • Layui 设置select下拉框自动选中某项的方法

    Layui 设置select下拉框自动选中某项的方法

    今天小编就为大家分享一篇Layui 设置select下拉框自动选中某项的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 利用JS实现抢红包的三种算法

    利用JS实现抢红包的三种算法

    对于抢红包来说最重要的就是随机性算法,如何确保每个人获得金额是趋向于平均的,也就是有平均的概率去随机,而尽量避免两极分化,本文给大家介绍了用JS实现抢红包的三种算法,文中有相关的代码示例,需要的朋友可以参考下
    2024-03-03
  • 十个你必须要会的TypeScript技巧分享

    十个你必须要会的TypeScript技巧分享

    学习Typescript通常是一个重新发现的过程。这篇文章为大家整理了十个你必须要会的TypeScript技巧，希望对大家学习TypeScript有所帮助
    2023-06-06
  • 纯js的右下角弹窗实例

    纯js的右下角弹窗实例

    下面小编就为大家带来一篇纯js的右下角弹窗实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 12306验证码破解思路分享

    12306验证码破解思路分享

    本文给大家分享的是个人对于12306的新的验证码系统的破解思路，仅仅是思路，还没进行实地验证，推荐给大家，抛砖引玉吧。
    2015-03-03
  • flv.js的具体使用教程

    flv.js的具体使用教程

    flv.js是一款优秀的开源web端flv文件播放器，flv格式目前广泛应用在直播及音视频录制领域，本文就详细的介绍一下flv.js的具体使用教程，感兴趣的可以了解一下
    2023-05-05

最新评论