5、offset家族
程序员文章站
2024-03-07 15:45:03
...
1、offset家族
1、offsetLeft
//如果父级没有定位 则以到浏览器的距离为准
//如果父级是body 则offsetLeft = d1的border外边算到父元素body的border外边. 包含父元素body的border
//但是如果父元素不是body的话 offsetLeft 则等于 d1的border外边算到父元素d2的border内边. 不包含父元素d2的border
//小心谷歌浏览器神经质 加多1px
2、offsetTop
3、offsetWidth
//offsetWidth = content +padding +border
//offsetHeight = content +padding +border
4、offsetHeight
5、 offsetParent
获取父亲元素parent
6、例子
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>瓜娃子</title>
<style>
#d1 {
width: 200px;
height: 200px;
color: skyblue;
border: 40px solid purple;
padding: 20px;
margin: 100px;
}
body {
border: 20px solid pink;
padding: 40px;
position: relative;
}
#d2 {
width: 500px;
height: 500px;
border: 20px solid orange;
padding: 40px;
position: relative;
margin: 20px;
}
</style>
</head>
<body>
<div id="d2">
<div id="d1">helloWorld</div>
</div>
<script>
var d1 = document.querySelector('#d1');
console.log([d1]);
//如果父级没有定位 则以到浏览器的距离为准
//如果父级是body 则offsetLeft = d1的border外边算到父元素body的border外边. 包含父元素body的border
//但是如果父元素不是body的话 offsetLeft 则等于 d1的border外边算到父元素d2的border内边. 不包含父元素d2的border
//小心谷歌浏览器神经质 加多1px
console.log(d1.offsetLeft);
console.log(d1.offsetTop);
//offsetWidth = content +padding +border
//offsetHeight = content +padding +border
console.log(d1.offsetWidth);
console.log(d1.offsetHeight);
</script>
</body>
</html>
上一篇： 链接--库打桩