SOURCE

console 命令行工具 X clear

                    
>
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;
    /* border: 1px solid red; */
}
.item {
    height: 90px;
}
.testButton {
    position: fixed;
    right: 20px;
}