offset家族成员详解
offset是什么,算什么?凭什么让我们这么辛苦的看望你,了解你,真的是搞笑,呵呵哒
。
第一集:今天为什么这么无聊,要来开电脑,因为爱情?哎不说了,想想就要拿一卷卫生纸,你们先看着吧,我拿卫生纸其去了
。未完待续。。。
其实实吧,是自己未出道之前,受恩师指导,现在很是怀念昔日的修炼时光,就在上一秒,翻出来看看,回忆 回忆,悟出一些道理,然后呢,我就来和猿猴们来啰嗦几句,批斗offset这群逗比家族,让我们继续往下面看:
1.用图说话:offset族谱图:
offset: 自己的!
javascript中有一套方便的 获取元素尺寸的办法就是offset家族;
第一集:续播》》哎,男人,哎,爱情,想想都痛,让我唱一首:为你付出那种真心你永远不了解,我还苦苦勉强爱上你的一切。。。爱你爱的死去活来,到头来我还是一只单身狗,宝宝心里苦,我想静静了。
2.offsetHight,offsetWidth:
注意:他们两个是得到对象的宽度和高度(自己的,与他人无关)!
话不多说,干活,看下面:
offsetWidth = width + border + padding div { width:220px; border-left:2px solid red; padding:10px;} div.offsetWidth = 220 + 2 + 20
为什么不用 div.style.width?
因为div.style.width:只能得到行内的数值!!!(这个地方是重点需注意,也是新手经常混淆理解的地方。)
3.offsetLeft,offsetTop:
曾曾爷爷。。。还有很多很多爷爷,估计我们说三天三夜都说不完,反正是遇到为止,一路上都没追到,就找到祖先(body)。
解释:返回距离上级盒子(最近的带有定位)左边的位置;
如果父级都没有定位则以body 为准,这里的父级指的是所有上一级不仅仅指的是,父亲,还可以是,爷爷,曾爷爷,
offsetLeft:用一段代码示例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
#yeye {
position: relative;
overflow: hidden;
background-color: orange;
width: 600px;
height: 600px;
padding: 100px;
}
#father {
width: 500px;
height: 500px;
background-color: pink;
margin: 100px;
margin-left:30px;
}
#son {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div id="yeye">
<div id="father">
<div id="son"></div>
</div>
</div>
</body>
</html>
<script>
var son = document.getElementById("son");
console.log(son.offsetLeft);
</script>
运行结果图:
4.offsetParent:
offsetLeft 从父级的padding 开始算 父亲的border 不算
总结: 就是子盒子到定位的父盒子边框到边框的距离
offsetParent:返回改对象的父级 (带有定位),不是亲爸爸!!
1.如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
2.如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。
5.offsetTop与style.top区别:
1.最大区别在于 offsetLeft:可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以,只有定位的盒子才有 left,top,right
2.offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
style.left = 300px parseInt(300px) 结果:300
parseInt(style.left) + parseInt(style.left)
3.offsetTop 只读,而 style.top 可读写。
4.如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
5.最重要的区别 style.left 只能得到行内样式 offsetLeft 随便
哦哦哦,原来是这样,哎呀呀,发现新大陆了,快分享给你的道友咯。带着缺爱的心情,
把offset家族一点点的扒出来,纸巾都用了两坨,哎,爱情就是这么难,喝酒去了,道友后会有期,
假如爱有天意,就给小编评论评论,分享分享吧
修道之人,在于勤奋。编程之人,在于苦练,猿猴之位,指日可待
爱你一万年,么么哒你一万年