offset/client/scroll一些总结
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一些总结的更多相关文章
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- js中 offset /client /scroll总结
offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...
- js 元素offset,client , scroll 三大系列总结
1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...
- offset client scroll
offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...
- bom中的offset,client,scroll
简单明了
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- 三大家族(offset、scroll、client)
offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...
随机推荐
- freemarker 直接使用List来遍历set集合,可能会报错
转摘:http://www.javaweb1024.com/java/JavaWebzhongji/2015/04/08/528.html freemarker 直接使用List来遍历set集合,可 ...
- 【教程】模拟登陆百度之Java代码版
[背景] 之前已经写了教程,分析模拟登陆百度的逻辑: [教程]手把手教你如何利用工具(IE9的F12)去分析模拟登陆网站(百度首页)的内部逻辑过程 然后又去用不同的语言: Python的: [教程]模 ...
- Java虚拟机（JVM）中的内存设置详解
在一些规模稍大的应用中,Java虚拟机(JVM)的内存设置尤为重要,想在项目中取得好的效率,GC(垃圾回收)的设置是第一步. PermGen space:全称是Permanent Generation ...
- httpclient爬取性感美图
依赖httpclient4.2,Jsop SemeiziCrawler.java package kidbei.learn.crawler; import java.io.File; import j ...
- PHPUnit在Windows下的配置及使用
由于我们项目涉及到php,因此需要对php代码进行单元测试.经过一番了解,决定用PHPUnit来测试php.PHPUnit花了不少时间摸索如何配置PHPUnit,看官网的文档也是一把泪.但知道怎么配置 ...
- JavaScript对下一个元旦倒计时,经常用于网店限时销售
<div>距离下一个元旦还有多久:</div> <div id="timer"></div> <script type=&qu ...
- Hadoop工程包架构解析
Hadoop源码解析 1 --- Hadoop工程包架构解析 1 Hadoop中各工程包依赖简述 Google的核心竞争技术是它的计算平台.Google的大牛们用了下面5篇文章,介绍了它们的计算 ...
- 使用SEP禁止客户端修改IP地址 - 飞舞的菜刀 - 51CTO技术博客
1．首先从注册表中搜寻 IP地址所在的位置,查到几项,此项即可: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Paramete ...
- LR中的编码问题
[转载]LoadRunner字符集与检查点的探讨 很多人在loadrunner测试脚本中加入中文检查点的时候会出现检查失败的情况,究竟是为什么呢?其实是被测试系统与loadrunner字符集之间的转换 ...
- nginx location 匹配顺序
location 匹配的原型是这样的：location [=|~|~*|^~|@] /uri/ { … } “=”是精确匹配“@”是命名的location ，在正常的location 匹配中不会使用， ...