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. Java线程之CompletionService

    转自:http://blog.csdn.net/andycpp/article/details/8902699 当使用ExecutorService启动了多个Callable后,每个Callable会 ...

  2. python基础数据类型

    整形:(不可变类型) >>> a = 123>>> type(a)<class 'int'> 长整形:(在python3中已经废弃了) >> ...

  3. wordpress安装

    通过浏览器访问wordpress文件包 点击现在就开始,填写下面内容 我的填写 如出现下面情况,你得先创建一个数据库,再重试 数据库的创建 之后会出现 点击进行安装 安装成功 登录 主界面 写个文章, ...

  4. 【液晶模块系列基础视频】1.1.iHMI43模块介绍

    [液晶模块系列基础视频]1.1.iHMI43模块介绍(上) [液晶模块系列基础视频]1.1.iHMI43模块介绍(下) ============================== 技术论坛:http ...

  5. ZooKeeper应用场景介绍

    ZooKeeper是一个高可用的分布式数据管理与系统协调框架.维护着一个树形层次结构,书中的节点被称为znode.znode可以用来存储数据,并且有一个与之相关联的ACL(权限),znode不能大于1 ...

  6. 2016.04.28,英语,《Vocabulary Builder》Unit 20

    nom, comes from the Latin word for 'name'. nominee is 'named', [ˌnɑːmɪ'niː] n. 被提名的人, 名义人. binomial ...

  7. 【Objective-C】Windows下Objective-C开发环境配置

    [Objective-C]Windows下Objective-C开发环境配置 ftp://ftpmain.gnustep.org/pub/gnustep/binaries/windows/   最近打 ...

  8. asp.net webform杂记

    context.Response.ContentType = "text/plain";            string encodeFileName = HttpUtilit ...

  9. Linux - full name of command

    pwd: print working directory cd: change directory ls: list ps: process status su: switch user mv: mo ...

  10. java new synchronized

    java provides the synchronized keyword for synchronizing thread access to critical sections. Because ...