【JavaScript】一篇弄懂offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent
正文概述
掘金(Owen) 2021-01-13 480
offsetWidth、offsetHeight
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
#div1 {width: 200px; height: 200px; background-color: #ccc; border: 30px solid #999; padding: 50px; margin: 50px; box-sizing: content-box;}
</style>
</head>
<body>
<div id="div1"></div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var nWidth = oDiv.offsetWidth //360 = width200 + border30 * 2 + padding50 * 2
var nHeight = oDiv.offsetHeight //360 = height200 + border30 * 2 + padding50 * 2
//offsetWidth和offsetHeight 的值是个数值，没有单位
}
</script>
</body>
box-sizing: border-box
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
#div1 {width: 200px; height: 200px; background-color: #ccc; border: 30px solid #999; padding: 50px; margin: 50px; box-sizing: border-box;}
</style>
</head>
<body>
<div id="div1"></div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var nWidth = oDiv.offsetWidth //200 = width200
var nHeight = oDiv.offsetHeight //200 = height200
}
</script>
</body>
offsetParent
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
#div2 {width: 200px; height: 200px; background-color: #ccc; border: 30px solid #999; padding: 50px; margin: 50px;}
</style>
</head>
<body>
<div style="position: relative;">
<div id="div1">
</div>
</div>
<hr>
<ol>
<li>定位父级（offsetParent）：可以理解成 absolute 和 relative 的关系，只和 定位的父级有关</li>
</ol>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var parent = oDiv.offsetParent //1、div1 设置 fixed时，parent-谷歌返回 null，火狐返回 body 2、div1 未设置 fixed时，parent 返回父级定位的元素，如果没有 返回 body
alert(oDiv.offsetParent) // div
}
</script>
</body>
offsetleft、offsetTop
实例1
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
div{margin: 100px; overflow: hidden;}
#div2 {width: 200px; height: 200px; background-color: #ccc;}
</style>
</head>
<body>
<div>
<div id="div2">
</div>
</div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div2');
var left = oDiv.offsetLeft
var top = oDiv.offsetTop
console.log(left,top) // 200,200 父级没有设置定位标签，所以oDiv 的 offsetParent 为 body
}
</script>
</body>
实例2
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
div{margin: 100px; overflow: hidden;}
#div2 {width: 200px; height: 200px; background-color: #ccc;}
</style>
</head>
<body>
<div id="div1" style="position: relative;">
<div id="div2">
</div>
</div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div2');
var left = oDiv.offsetLeft
var top = oDiv.offsetTop
console.log(left,top) // 100,100 父级没有设置定位标签，所以oDiv 的 offsetParent 为 div1
}
</script>
</body>
实例3、在实例2中，如何获取 div2 到 body 的偏移量
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
div {margin: 100px; overflow: hidden;}
#div2 {width: 200px; height: 200px; background-color: #ccc;}
</style>
</head>
<body>
<div>
<div style="position: relative;">
<div id="div2">
</div>
</div>
</div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div2')
function offset(obj) {
var leftToBody = obj.offsetLeft; //leftToBody = obj 的 offsetLeft 加上 所有定位父级的 offsetLeft
var TopToBody = obj.offsetTop;
var positionParent = obj.offsetParent;
while (positionParent) { //body.offsetParent = null，为假
leftToBody += positionParent.offsetLeft;
TopToBody += positionParent.offsetTop;
positionParent = positionParent.offsetParent
}
return {
left: leftToBody,
top: TopToBody
}
}
console.log(offset(oDiv)) //{left: 300,top: 300}
}
</script>
</body>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！