- clientWidth //寬度(content+paddingLeft+paddingRight)
- clientHeight //長度(content+paddingTop+paddingBottom)
- offsetWidth //寬度(content+padding+borderLeft+borderRight)
- offsetHeight //長度(content+padding+borderTop+borderBottom)
- offsetTop //marginTop如果dom位於position:relative;獲取對象相對於由offsetParent屬性指定的父座標
- offsetLeft //marginLeft
- clientTop //上border邊框
- clientLeft //左border邊框
- scrollWidth //dom.scrollWidth
- scrollHeight //scrollHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#content{
width:100px;
height:150px;
background-color:red;
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
margin:20px;
border:5px solid yellow;
overflow: auto;
}
p{
width:500px;
height:500px;
background-color:#000;
}
</style>
</head>
<body>
<div style="padding:50px;">
<div id="content">
<span id="My_P"></span>
<span id="span">【消息稱Facebook公司營收創新高】外電報道，據消息人士透露，社交網站Facebook2011年上半年營收爲16億美元，淨利潤達5億美元。其中，16億美元的營收入不近創下公司營收新高，也使得這家世界上最大的社交網絡公司的營收入同比增加了近一倍。 </span>
</div>
</div>
<script>
var dom = document.getElementById("content")
console.log(`寬度(content+padding):${dom.clientWidth}`)
console.log(`長度(content+padding):${dom.clientHeight}`)
console.log(`寬度(content+padding+borderLeft+borderRight):${dom.offsetWidth}`)
console.log(`長度(content+padding+borderTop+borderBottom):${dom.offsetHeight}`)
console.log(`marginTop:${dom.offsetTop}`)
console.log(`marginLeft:${dom.offsetLeft}`)
console.log(`上border邊框:${dom.clientTop}`)
console.log(`左border邊框:${dom.clientLeft}`)
console.log(`滾動條的寬度+borderLeft${dom.scrollWidth}`)
console.log(`滾動條的寬度+borderTop${dom.scrollHeight}`)
dom.addEventListener("scroll",function(e){
console.log(e)
console.log(dom.scrollTop)
})
//方法返回元素的大小及其相對於視口的位置
console.log(dom.getBoundingClientRect()) //78
console.log(document.getElementById("span").getClientRects())
</script>
</body>
</html>
