clientHeight...

by Mike Lin

HTML

<div class="test1">
这是为了测试clientHeight/clientWidth/clientLeft/clientTop
这是为了测试clientHeight/clientWidth/clientLeft/clientTop
这是为了测试clientHeight/clientWidth/clientLeft/clientTop
这是为了测试clientHeight/clientWidth/clientLeft/clientTop
这是为了测试clientHeight/clientWidth/clientLeft/clientTop
</div>

<div class="result">
<p>
测试结果如下：
</p>
<p class="rs">

</p>
</div>

CSS

.test1{
  width: 100px;
  height: 100px;
  padding: 1px;
  margin: 1px;
  border: 2px solid #000;
  overflow: auto;
}

JavaScript

const test1 = document.querySelector('.test1')

const rs = document.querySelector('.rs')
rs.innerHTML =`scrollHeight: ${test1.scrollHeight}
scrollLeft: ${test1.scrollLeft}
scrollTop: ${test1.scrollTop}
scrollWidth: ${test1.scrollWidth}`