div获取内容高度
时间: 2023-07-24 12:00:14 浏览: 77
你可以使用JavaScript中的`clientHeight`属性来获取一个元素的内容高度,不包括padding和border的高度。示例如下:
```html
<div id="myDiv" style="height: 200px; padding: 10px; border: 1px solid black; overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lorem sit amet sapien faucibus fringilla. Nulla facilisi. Ut euismod massa in sollicitudin placerat. Nam vel sapien non augue bibendum luctus. Nam at urna in leo faucibus congue. Sed ut sapien vel mauris dapibus venenatis. Nulla facilisi. Phasellus dignissim, sapien sit amet lacinia accumsan, elit arcu convallis sem, eget lobortis metus velit vel dolor. Sed at mi sit amet mauris convallis congue. In mollis congue tortor, vel commodo ex malesuada at. Fusce in rhoncus est.</p>
<p>Etiam euismod pulvinar ante, in sagittis dui consequat eu. Nam ut mi velit. Fusce ac lectus id ipsum auctor volutpat. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eu odio et nulla fermentum fermentum. Nulla facilisi. Duis et lorem quis tellus maximus iaculis. Vestibulum at mi sapien. Sed lacinia sodales mi a efficitur. Sed auctor tellus a enim posuere placerat. Fusce ultricies mauris vel cursus vehicula. Duis vel velit ut nulla interdum pulvinar. Nulla facilisi. Phasellus convallis tortor eget odio consectetur, eget eleifend nulla vehicula.</p>
<p>In hac habitasse platea dictumst. Sed efficitur, velit id aliquam ultricies, odio sapien commodo leo, non lobortis quam tellus vitae turpis. Fusce euismod elit et libero laoreet, ac volutpat magna ultrices. Duis auctor, leo nec fermentum posuere, tortor orci bibendum lorem, sed congue odio sem vel sapien. Vestibulum sagittis non ante quis porta. Phasellus laoreet libero nec risus sagittis, at bibendum velit tincidunt. Maecenas quis enim eget leo porta fringilla vel at quam. Sed viverra arcu vel orci feugiat, vel venenatis sapien tristique. Praesent vestibulum iaculis turpis, at pharetra orci dictum et. Ut vel est sed augue dignissim faucibus. Cras at nisi eget mauris dapibus bibendum. Integer feugiat velit nec turpis luctus, vitae commodo sapien malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vitae facilisis quam. Sed bibendum eros vitae libero egestas auctor.</p>
</div>
```
```javascript
const myDiv = document.getElementById('myDiv');
const height = myDiv.clientHeight;
console.log(height); // 输出:200
```
需要注意的是,如果元素有滚动条,`clientHeight`属性只会返回可见部分的高度,而不是全部内容的高度。如果你需要获取全部内容的高度,可以使用`scrollHeight`属性。
阅读全文