大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说javascript中的offsetWidth、clientWidth、innerWidth的使用「建议收藏」,希望您对编程的造诣更进一步.
元素视图属性
clientWidth clientHeight clientTop clientLeft
只读属性 clientHeight 对于没有定义 CSS 或者内联布局盒子的元素为 0；否则，它是元素内部的高度（以像素为单位），包含内边距，但不包括边框、外边距和水平滚动条（如果存在）。
clientHeight 可以通过 CSS height + CSS padding – 水平滚动条高度（如果存在）来计算。
clientLeft 表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。
scrollWidth scrollHeight scrollTop scrollLeft
scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight 值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的 padding，但不包括元素的 border 和 margin。scrollHeight 也包括 ::before 和 ::after这样的伪元素。 如果元素的内容不需要垂直滚动条就可以容纳，则其 **scrollHeight **等于{{domref(“Element.clientHeight”, “clientHeight”)}}
scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 **scrollTop **值为0。
scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。
注意如果这个元素的内容排列方向（direction）是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为 0。此时，当你从右到左拖动滚动条时，scrollLeft 会从 0 变为负数。
即设置css属性为direction: rtl;
offsetWidth offsetHeight offsetTop offsetLeft offsetParent
offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。通常，元素的 offsetHeight 是一种元素 CSS 高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before 或:after 等伪类元素的高度。如果元素被隐藏（例如 元素或者元素的祖先之一的元素的 style.display 被设置为 none），则返回 0
offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。
window视图属性
只读的 Window 属性 innerWidth 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。
文档视图
一、document.documentElement
clientWidth clientHeight clientTop clientLeft
scrollWidth scrollHeight scrollTop scrollLeft
offsetWidth offsetHeight offsetTop offsetLeft offsetParent
二、document.body
clientWidth clientHeight clientTop clientLeft
scrollWidth scrollHeight scrollTop scrollLeft
offsetWidth offsetHeight offsetTop offsetLeft offsetParent
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13658.html
