clientHeight...

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 =`clientHeight: ${test1.clientHeight}
clientLeft: ${test1.clientLeft}
clientWidth: ${test1.clientWidth}
clientTop: ${test1.clientTop}`