码迷,mamicode.com
首页 > Web开发 > 详细

js里关于各种尺寸的获取

时间:2020-04-30 15:43:38      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:body   scroll   小数点   关于   宽度   元素   设置   包含   getc   

二、获取元素的尺寸

与元素尺寸相关的属性
元素尺寸属性说明
clientWidth 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域
clientHeight 获取元素可视部分的高度,即 CSS 的 height 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域
offsetWidth 元素在页面中占据的宽度总和,包括 width、padding、border 以及滚动条的宽度
offsetHeight 元素在页面中占据的高度总和,包括 height、padding、border 以及滚动条的宽度
scrollWidth 当元素设置了 overflow:visible 样式属性时,元素的总宽度,也称滚动宽度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域
scrollHeight 当元素设置了 overflow:visible 样式属性时,元素的总高度,也称滚动高度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域

二、元素尺寸的精准获取(含小数点)

属性或方法说明
getComputedStyle(element)[style] 可以获取元素的高度或者宽度
element.getBoundingClientRect().style 可以获取元素的高度,宽度,距离顶部,底部,左,右的距离和坐标

二、元素尺寸的获取JQ

  

属性或方法说明
$(element).width(); 可以获取元素的宽度(不含小数)
$(element).height(); 可以获取元素的高度(不含小数)
$(element).offset()
获取元素距离顶部和左部的距离(含小数)

js里关于各种尺寸的获取

标签:body   scroll   小数点   关于   宽度   元素   设置   包含   getc   

原文地址:https://www.cnblogs.com/stardreams/p/12808722.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!