您的位置：首页 > 其它

offset/client/scroll一些总结

2016-03-25 10:24 309 查看

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的左上角顶点的水平[b]偏移量。[/b]

当有定位的情况下:

从这个定义中我们可以明确地知道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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航