JS中的位置和宽度:clientWidth、offsetWidth、scrollWidth,clientTop和clientLeft等区别
在JS中的位置和宽度,也就是:clientWidth、offsetWidth、scrollWidth,clientTop和clientLeft本身上是有区别的,在获取的方式上也有着很大的区别,在元素本身上还有在html和body上获取到的信息都有着区别。
首先是获取宽高
获取宽高的方式为以下几种
元素.clientWidth客户宽高
元素.clientHeight
元素.offsetWidth偏移宽高
元素.offsetHeight
元素.scrollWidth滚动宽高
元素.scrollHeight
注意
以上所有的宽高,基于元素被加入到DOM渲染树后
也就是被添加在页面中以后,才可以获取
并且图片这类后加载元素无法获取宽高(异步原因造成)
补充:
异步: 当运行某个需要一段时间完成的内容时,可以先继续向后执行代码,加载和执行后面是同时进行的
同步: 上一步执行完成再执行下一步
元素
clientWidth和clientHeight
下面div代表的是元素
console.log(div.clientWidth,div.clientHeight);
上面获取到的宽高是:width+padding
如果有滚动条时会是:width+padding-17(滚动条宽高)
offsetWidth和offsetHeight
下面div代表的是元素
console.log(div.offsetWidth,div.offsetHeight);
上面获取到的宽高是:width+padding+border也就是这个元素的实际占位宽高(加上边框)
scrollWidth和scrollHeight
下面div代表的是元素
console.log(div.scrollWidth,div.scrollHeight);
上面获取到的宽高是:width+padding
如果有滚动条时会是:因为内容宽度不同,实际内容宽度+padding
元素以外的宽高,页面宽高
注意
document.body表示的是:body
document.documentElement表示的是:html
clientWidth和clientHeight
body:
console.log(document.body.clientWidth,document.body.clientHeight);
上面获取到的宽高是:页面宽度-16(默认8个像素的宽度) 高度0(因为没有内容)
如果有内容会撑开,元素有多高,就会撑开多少,宽度是可视宽度
Html:
console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
上面获取到的宽高是:页面的可视宽高,并不会因为内容变大而撑开
offsetWidth和offsetHeight
body:
console.log(document.body.offsetWidth,document.body.offsetHeight);
上面获取到的宽高是:页面宽度-16(默认8个像素的宽度) 高度0(因为没有内容)
如果有内容会撑开,元素有多高,就会撑开多少,宽度是可视宽度
Html:
console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight);
上面获取到的宽高是:页面的可视宽度,高度是8
在body有内容时,宽度仍然是可视宽度,但html的高度是body内容高度+bodyMargin
scrollWidth和scrollHeight
body:
console.log(document.body.scrollWidth,document.body.scrollHeight);
上面获取到的宽高是:在没有内容时和body的clientWidth相同
如果有内容时,内容撑开的宽高,和clientHeight相同,内容宽高
Html:
console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);
如果没有body没有高度,则是可视宽高
如果body有宽高,不超过可视宽高,则是可视宽高
如果body的宽高超出可视范围,则是body宽高+margin(宽度+margin,高度+margin*2)
特别注意-以后常用:
1、内容高度 console.log(document.body.clientHeight);
2、可视宽高 console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
3、有滚动条时,内容宽高 console.log(document.body.scrollWidth,document.body.scrollHeight);
获取位置的方式
clientLeft 和 clientTop
offsetLeft 和 ffsetTop
scrollLeft 和 crollTop
元素
clientLeft和clientTop
console.log(div1.clientLeft,div1.clientTop);
得到的是边线宽高
offsetLeft和offsetTop
console.log(div1.offsetLeft,div1.offsetTop);
没有定位时,相对页面的左上顶角位置
如果定位相对父容器左上角位置和css中left,top相同
scrollLeft和scrollTop
console.log(div1.scrollLeft,div1.scrollTop);
是元素上的滚动条位置仅这两个属性可以设置
特别注意
IE8以后才有的方法getBoundingClientRect
var rect=div1.getBoundingClientRect();
console.log(rect);
{
width, //offsetWidth
height, //offsetHeight
left, //最左边到可视窗口的距离
top, //最顶部到可视窗口的距离
right,//left+width 最右边到可视窗口的距离
bottom,//top+height 最下面到可视窗口的距离
x, //left
y //top
}
元素的
1、offsetLeft、offsetTop,定位后元素相对父容器的距离
2、scrollLeft,scrollTop,元素内的滚动条位置
3、getBoundingClientRect()获取元素的矩形界限范围
html body
clientLeft和clientTop
console.log(document.body.clientLeft,document.body.clientTop)
console.log(document.documentElement.clientLeft,document.documentElement.clientTop)
body和 html没有边线,所有这两个值都是0
offsetLeft和offsetTop
console.log(document.body.offsetLeft,document.body.offsetTop)
console.log(document.documentElement.offsetLeft,document.documentElement.offsetTop)
因为body和html标签都是最顶端,最外层,这两个值都是0
scrollLeft和scrollTop
window.onscroll=function(){
console.log(document.body.scrollTop,"body");//早起谷歌浏览器和苹果浏览器是body
// window的滚动条是document.documentElement的scrollTop
console.log(document.documentElement.scrollTop,"html");
}