offset/client/scroll一些总结

1.offset

首先offset共有五个值

1.offsetParent

2.offsetTop

3.offsetLeft

4.offsetWidth

5.offsetHeight

先看代码示例：

<!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>无标题文档</title>

</head>

<style type="text/css">

    body{

        border:10px solid blue;

        margin:10px;

        padding:10px;

        background:#eee;

    }

    #show{

        width:400px;

        height:200px;

        background:green;

        border:10px solid red;

        padding:10px;

        color:white;

    }

</style>

<script type="text/javascript">

window.onload=function (){

   var obj=document.getElementById("show");

   obj.innerHTML="<p>Browser:"+window.navigator.userAgent+"</p>"+

   "<p>offsetWidth:"+obj.offsetWidth+"</p>"+

   "<p>offsetHeight:"+obj.offsetHeight+"</p>"+

   "<p>:offsetLeft"+obj.offsetLeft+"</p>"+

   "<p>:offsetTop"+obj.offsetTop+"</p>";

}

</script>

</head>

<body>

 <div id="show"></div>

</body>

效果图；

1.offset-width和offset-heigh

不难发现（offset-width和offset-height），除了ie7以外，其他的值都是一样的。

总结：offsetWidth与offsetHeight有个特点，就是这两个属性的值只与该元素有关（也就是说与定位哪些无关）

      offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

　　offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

说白了，offsetwidth（height）其实求的就是元素的盒子模型width（height）值；

ps：为什么ie7下的会少一个px呢（等哈在讨论）

2.offsetTop和offLeft

  这两个值就涉及到定位的问题；

代码：

<!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>无标题文档</title>

</head>

<style type="text/css">

 #outer{

     width:200px;

     height:200px;

     background:green;

     position:relative;

     color:white;

 }

 #inner{

     height:50px;

     margin-left:40px;

     width:50px;

     background:blue;

     border:10px solid gray;

     position:absolute;

     left:10px;

     padding-left:10px;

 }

</style>

<script type="text/javascript">

window.onload=function (){

 var obj=document.getElementById("inner");

 obj.innerHTML=obj.offsetLeft;

}

</script>

</head>

<body>

  <div id="outer">

      <div id="inner"></div>

  </div>

</body>

 效果：

结论：

   定义：返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。

   当有定位的情况下:

   从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关。

在这里我们发现：（默认的参照物体是offsetParent）

offsetLeft=left+margin-left，其中padding-left在此处没有效果

ps：当我们使用absolue（relative）进行定位之后，我们直接使用left，就可以是精确，方便的定位了，一般不会再用到margin-left

或者padding-left来控制元素的位置 了滴呀；所以大多数情况下offsetLeft就等于left的值滴呀

  当没有定位的情况下

  默认参照的物体就是我们的body（也可以理解成我们浏览器窗口）这个时候：

如果理解成body

offsetLeft=body的margin-left,padding-left,

如果理解成浏览器窗口

offsetleft=元素相对浏览器窗口左边的距离

3.offsetParent(涉及到定位的知识)

　　offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

　　总的来说两条规则：

　　1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

　　2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

4.clientwidth和clientHeight

   这里来两个属性，比较好理解，指定的就是可视区域的宽度和高度。

5.scrollTop和scrollLeft

这个是用于，当出现滚动条的时候，获取被卷曲的高度和宽度。

offset/client/scroll一些总结的更多相关文章

  1. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  2. js中 offset /client /scroll总结

    offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...

  3. js 元素offset,client , scroll 三大系列总结

    1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...

  4. offset client scroll

    offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...

  5. bom中的offset,client,scroll

    简单明了

  6. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

  7. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  8. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  9. 三大家族(offset、scroll、client)

    offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...

随机推荐

  1. POJ 2486 Apple Tree(树形DP)

    题目链接 树形DP很弱啊,开始看题,觉得貌似挺简单的,然后发现貌似还可以往回走...然后就不知道怎么做了... 看看了题解http://www.cnblogs.com/wuyiqi/archive/2 ...

  2. 使用RBTool自动提交code review请求

    使用RBTool自动提交code review请求 前言 让我们回想一下手工提交review请求的过程: 首先得用 svn diff > filename.diff 生成diff文件. 然后输入 ...

  3. [转] - QBuffer类参考

    QBuffer类参考 QBuffer类是一个操作QByteArray的输入/输出设备. 详情请见…… #include <qbuffer.h> 继承了QIODevice. 所有成员函数的列 ...

  4. 2015寒假ACM训练计划

    1月26号至3月4号 每天给自己一个计划.做有意义的事情,不要浪费时间. 8:00——11:30 acm训练 11:30——13:00 午休 13:00——17:30  acm训练 17:30——18 ...

  5. JQuery的定义

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...

  6. 文件上传（springMVC+ckeditor）

    1.首先添加springMVC文件上传的jar commons-fileupload-1.2.2.jar和commons-io-2.0.1.jar (maven项目可以使用 <dependenc ...

  7. [ZZ] D3D中的模板缓存（3）

    http://www.cppblog.com/lovedday/archive/2008/03/25/45334.html http://www.cppblog.com/lovedday/ D3D中的 ...

  8. JavaScript 页面跳转的几种方式 转

    第一种:      <script language="JavaScript" type="text/javascript">         wi ...

  9. Jsp入门学习笔记

    #Jsp入门 一.JSP基础语法 1.JSP指令: page inlcude taglib 2.JSP注释: a.html注释: <!-- abcdefghijklmn --> b.jsp ...

  10. ATT 汇编语法

      在研华的pc104上使用看门狗要使用汇编.使用汇编来修改CMOS里面的参数.也就是内联汇编.linux下gcc只支持ATT汇编.所以这儿有必要将ATT语法学习学习.以后需要的时候翻出来温习温习. ...