dw网站建设基本流程,龙华网站建设招聘,厦门建设工程交易中心网站,东莞百度seo推广公司简介#xff1a;
clientHeight: 元素的可见高度#xff0c;不包括边框和滚动条#xff0c;是相对于视口的大小——clientHeight (content height) (padding toppadding bottom)。offsetHeight: 元素的高度#xff0c;包括边框和滚动条#xff0c;但不包括外边距 —— o…简介
clientHeight: 元素的可见高度不包括边框和滚动条是相对于视口的大小——clientHeight (content height) (padding toppadding bottom)。offsetHeight: 元素的高度包括边框和滚动条但不包括外边距 —— offsetHeight content height padding border。scrollHeight: 元素内容的总高度包括不可见部分包括padding伪元素::before或::after的高度但是不包括border、margin以及水平滚动条的高度如果有水平滚动条的话需要通过滚动条才能查看。
使用场景:
clientHeight: 当需要获取元素在视口中的可见高度时可以使用clientHeight。offsetHeight: 当需要获取元素的总高度包括边框和滚动条时可以使用offsetHeight。scrollHeight: 当需要获取元素内容的总高度包括不可见部分时可以使用scrollHeight。
代码示例
// 获取元素的可见高度
var element document.getElementById(myElement);
var clientHeight element.clientHeight;// 获取元素的总高度
var offsetHeight element.offsetHeight;// 获取元素内容的总高度
var scrollHeight element.scrollHeight;
注意事项
1. clientHeight: - clientHeight是元素在视口中的可见高度不包括滚动条和外边距。 - 当元素的内容超出视口高度时clientHeight不会包括溢出的部分。 - 当元素的display属性为none时clientHeight为0。
2. offsetHeight: - offsetHeight是元素的总高度包括内容、内边距、边框但不包括外边距。 - 当元素的display属性为none时offsetHeight为0。
3. scrollHeight: - scrollHeight是元素内容的总高度包括不可见部分需要通过滚动条才能查看。 - 当元素的内容没有溢出时scrollHeight等于元素的clientHeight。 - 当元素的内容超出视口高度时可以使用scrollHeight来获取整个内容的高度以便进行滚动操作。
4.获取内容的实际高度content height(只有height 不包括padding、border、margin)
window.getComputeStyle(obj).height
5.getBoundingClientRect()方法 getBoundingClientRect()方法用于获取元素位置这个方法没有参数可以获取页面中某个元素的左上右和下分别相对浏览器视窗的位置。getBoundingClientRect()是DOM元素到浏览器可视范围的距离不包含文档卷起的部分。 getBoundingClientRect方法返回的rect对象rect对象具有以下属性全部为只读
x元素左上角相对于视口的横坐标y元素左上角相对于视口的纵坐标height元素高度width元素宽度left元素左上角相对于视口的横坐标与x属性相等right元素右边界相对于左边视口的横坐标等于x widthtop元素顶部相对于视口的纵坐标与y属性相等bottom元素底部相对于上边视口的纵坐标等于y height 推荐
三大家族scroll、offset、client_offset、client、scroll三大家族!-CSDN博客
