目录
二、scrollWidth、scrollHeight、scrollTop、scrollLeft
1、scrollWidth、scrollHeight(仅可读)
三、clientWidth、clientHeight、clientTop、clientLeft
3、clientWidth、clientHeight(仅可读)
四、offsetWidth、offsetHeight、offsetTop、offsetLeft
一、我知道的有以下这些
1、scrollWidth、scrollHeight、scrollTop、scrollLeft
2、clientWidth、clientHeight、clientTop、clientLeft
3、offsetWidth、offsetHeight、offsetTop、offsetLeft
4、 innerWidth、innerHeight
5、outerWidth、outerHeight
6、naturalWidth、naturalHeight
二、scrollWidth、scrollHeight、scrollTop、scrollLeft
1、scrollWidth、scrollHeight(仅可读)
<1>当文字内容未超出盒子大小时
scrollWidth=盒子的宽+padding值
scrollHeight=盒子的高+padding值
<2>当文字溢出盒子的时候
scrollWidth=文字内容的宽度+padding值
scrollHeight=文字内容高度+padding值
<3>当有滚动条的时候
scrollWidth=文本宽/盒子宽+padding值-纵向滚动条的宽
scrollHeight=文本宽/盒子宽+padding值-横向滚动条的宽
2、scrollTop、scrollLeft(可读可写)
<1>含义
scrollTop:隐藏在盒子顶上的文字高度;
scrollLeft:隐藏在盒子左边的文字宽度;
<2>如何计算
scrollTop=文本总高度-盒子高度-横向滚动条宽
scrollLeft=文本总宽-盒子宽度-纵向滚动条宽
三、clientWidth、clientHeight、clientTop、clientLeft
3、clientWidth、clientHeight(仅可读)
<1>没滚动条
clientWidth=盒子宽+padding值
clientHeight=盒子高度+padding值
<2>有滚动条
clientWidth=盒子宽+padding值-纵向滚动条宽
clientHeight=盒子高度+padding值-横向滚动条
4、clientTop、clientLeft
简而言之,就是border值
clientTop=border-top值
clientLeft=border-left值
四、offsetWidth、offsetHeight、offsetTop、offsetLeft
1、offsetWidth、offsetHeight
<1>没有滚动条
offsetWidth=盒子宽+padding值+border值
offsetHeight=盒子高+padding值+border值
<2>有滚动条
offsetWidth=盒子宽+padding值+border值+纵向滚动条宽
offsetHeight=盒子高+padding值+border值+横向滚动条宽
2、offsetTop、offsetLeft
<1>该盒子有position样式时,逐级向上查找父盒子元素,即有除了fixed、static定位的父盒子元素
offsetTop=该盒子顶部到父盒子底部的距离(border以外的距离)
offsetLeft=该盒子左边缘到父盒子的右边缘的距离(border以外)
<2>无position定位,body就是它的父盒子
五、innerWidth、innerHeight
<1>window.innerWidth、windowHeight
获取浏览器的可视宽高,不包括工具栏、菜单栏、滚动条
<2>jQuery获取innerWidth、innerHeight
innerWidth=盒子宽+padding值
innerHeight=盒子高+padding值
六、outerWidth、outerHeight
<1>window.outerWidth、window.outerHeight
获得浏览的可是宽高,包含工具栏、菜单栏、滚动条
<2>jQuery获取outerWidth、outerHeight
outerWidth=盒子宽+padding值+border值+滚动条宽
outerHeight=盒子高+padding值+border值+滚动条宽
<3>加参数true,还包含margin值
$(div).outerWidth(true)=盒子宽+padding值+border值+margin值+滚动条宽
$(div).outerHeight(true)=盒子高+padding值+border值+margin值+滚动条宽
七、naturalWidth、naturalHeight
<1>应用场景:
一般情况下,在盒子中放入图片,会给其宽高,压缩或放大图片,用以上六种的方法无法获取图片的原始大小。这个时候就可以用naturalWiidth、naturalHeight来获取图片的原始大小。