console
let el = document.querySelector(".container")
// console
function handleClick () {
// 盒状模型
// console.log('el.clientHeight=',el.clientHeight)
// console.log('el.clientWidth=',el.clientWidth)
// console.log('el.clientTop=',el.clientTop)
// console.log('el.clientLeft=',el.clientLeft)
// console.log('el.scrollHeight=',el.scrollHeight)
// console.log('el.scrollWidth=',el.scrollWidth)
// console.log('el.scrollTop=',el.scrollTop)
// console.log('el.scrollLeft=',el.scrollLeft)
// console.log('el.offsetHeight=',el.offsetHeight)
// console.log('el.offsetWidth=',el.offsetWidth)
// console.log('el.offsetTop=',el.offsetTop)
// console.log('el.offsetLeft=',el.offsetLeft)
// console.log('el.offsetParent=',el.offsetParent)
// 元素的行内样式信息
console.log('el.style=',el.style)
// 属性相关方法
// console.log(el.hasAttribute('class'))
// console.log(el.getAttribute('class'))
// el.setAttribute('test-data','test')
// el.removeAttribute('class')
// console.log(el.closest('div'))
// getBoundingClientRect方法
// console.log(el.getBoundingClientRect())
}
<div class="outer-container">
<div class="block"></div>
<div class="container" style="background-color:skyblue">
<button onclick="handleClick()" class="testButton" >按钮</button>
<div class="item" >2323</div>
<div>111111</div>
<div>111111</div>
<div>111111</div>
<div>111111</div>
</div>
</div>
<span class="">121121121212121212121212121212212121121212121212121212121212212121121212121212121212121212212121121212121212121212121212212121212121212121212121212212</span>
.outer-container {
height: 300px;
background-color: orange;
position: relative;
}
.block {
height: 50px;
background-color: lemonchiffon
}
.container {
height:100px;
overflow: auto;
background-color: oldlace;
margin-left: 20px;
}
.item {
height: 90px;
}
.testButton {
position: fixed;
right: 20px;
}