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 ...