- 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>