offsetTop...

by Mike Lin

HTML

<span class="test1">
这是测试`offsetTop`、`offsetLeft`、`offsetWidth`及`offsetHeight`在span元素中的取值，`offsetTop`和`offsetLeft`描述的是第一个边界框的位置,`offsetWidth`和`offsetHeight`描述的是边界框的尺寸
</span>
<br />
<br />
<div class="test2">
这是测试`offsetTop`、`offsetLeft`、`offsetWidth`及`offsetHeight`在span元素中的取值，`offsetTop`和`offsetLeft`描述的是第一个边界框的位置,`offsetWidth`和`offsetHeight`描述的是边界框的尺寸
</div>
<br />
<br />
<div class="test3-wrapper">
<div class="test3">
这是测试`offsetTop`、`offsetLeft`、`offsetWidth`及`offsetHeight`在span元素中的取值，`offsetTop`和`offsetLeft`描述的是第一个边界框的位置,`offsetWidth`和`offsetHeight`描述的是边界框的尺寸
</div>
</div>
<div class="result">
<p>
测试结果如下：
</p>
<p class="rs">

</p>
</div>

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

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

</p>
</div>

CSS

.test1, .test2, .test3{
  padding: 1px;
  margin: 1px;
  border: 2px solid #000;
  overflow: auto;
}
.test3-wrapper{
  position: relative;
  border: 1px solid red;
}

JavaScript

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

const rs = document.querySelector('.rs')
const rs1 = document.querySelector('.rs1')
const rs2 = document.querySelector('.rs2')

rs.innerHTML =`test1的参数：
offsetTop: ${test1.offsetTop}
offsetHeight: ${test1.offsetHeight}
offsetLeft:${test1.offsetLeft}
offsetParent:${test1.offsetParent}
offsetWidth:${test1.offsetWidth}
`

rs1.innerHTML =`test2的参数：
offsetTop: ${test2.offsetTop}
offsetHeight: ${test2.offsetHeight}
offsetLeft:${test2.offsetLeft}
offsetParent:${test2.offsetParent}
offsetWidth:${test2.offsetWidth}
`

rs2.innerHTML =`test3的参数：
offsetTop: ${test3.offsetTop}
offsetHeight: ${test3.offsetHeight}
offsetLeft:${test3.offsetLeft}
offsetParent:${test3.offsetParent}
offsetWidth:${test3.offsetWidth}
`