获取div宽高
元素.clientWidth 客户宽高
元素.clientHeight
元素.offsetWidth 偏移宽高
元素.offsetHeight
元素.scrollWidth 滚动宽高
元素.scrollHeight
以上所有的宽高,基于元素被加入到DOM渲染树后
也就是被添加在页面中以后,才可以获取
并且图片这类后加载元素无法获取宽高(异步原因造成)
异步 当运行某个需要一段时间完成的内容时、可以先继续向后执行代码,加载和执行后面是同时进行的
同步 上一步执行完成再执行下一步
元素的宽高
console.log(getComputedStyle(div).width) //50px-滚动条的宽高
console.log(div.clientWidth) 50 不加单位
console.log(div.clientWidth) width+padding-滚动条的宽高,不带边线(边框)
console.log(div.offsetWidth) width+padding+border 有没有滚动条跟它没有关系,就是实际这个div的占位宽高,带边线(边框)
console.log(div.scrollWidth)
如果没有超出 等同于clientWidth和clientHeight
如果超出就是实际内容所占的宽高,但是padding没有右侧和下侧
如果超出就是实际内容所占的宽高,但是padding没有右侧和下侧-(如果有滚动条,减去滚动条宽高)
body与html的宽高
// ————————————————————————————元素以外的宽高,页面宽高
// document.body body
// document.documentElement html
// console.log(document.body.clientWidth,document.body.clientHeight);//实际body的宽度和高度-滚动条宽高
// console.log(document.body.offsetWidth,document.body.offsetHeight);//实际body的宽度和高度-滚动条宽高
// console.log(document.body.scrollWidth,document.body.scrollHeight);//实际body中内容的宽高
// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);//当前文档的可视宽高-(如果有滚动条,减去滚动条宽高)
// console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight);//当前文档的内容宽高-(如果有滚动条,减去滚动条宽高)
// console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);//当前文档的可视宽高,如果有滚动条,就是实际body撑开的宽高
clientWidth/Height
//页面宽度-16(默认8个像素的宽度) 高度0(因为没有内容)如果有内容会撑开
// 元素有多高,就会撑开多少 ,宽度是可视宽度
// console.log(document.body.clientWidth,document.body.clientHeight);
// 获取页面的可视宽高 ,并不会因为内容变大而撑开
// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
offsetWidth/Height
// body的offsetWidth和clientWidth相同
// console.log(document.body.offsetWidth,document.body.offsetHeight);
// 获取页面的可视宽度,高度是8 ,有内容,宽度仍然是可视宽度,html的高度是body内容高度+bodyMargin
// console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight);
scrollWidth/Height
// 没有内容时和body的clientWidth相同,有内容,内容撑开的宽高,和clientHeight相同,内容宽度
// console.log(document.body.scrollWidth,document.body.scrollHeight);
// 如果没有body没有高度,则是可视宽高
// 如果body有宽高,不超过可视宽高,则是可视宽高
// 如果body的宽高超出可视范围,则是body宽高+margin(宽度+margin,高度+margin*2)
// console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);
最常用的
// 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 offsetTop
// scrollLeft scrollTop
元素的位置
clientLeft/Top
// var div1=document.getElementById("div1");
// 边线宽高
// console.log(div1.clientLeft,div1.clientTop);
offsetLeft/Top
// 没有定位时,相对页面的左上顶角位置
// 如果定位 相对父容器左上角位置 和css中left,top相同
// console.log(div1.offsetLeft,div1.offsetTop);
scrollLeft/Top
// 是元素上的滚动条位置(元素已经向下滚动了多少/元素上去了多少,而不是滚动条的长度..) 仅这两个属性可以设置
// console.log(div1.scrollLeft,div1.scrollTop);
可滚动页面的整体减去可视窗口的高度
// div1.scrollTop=157; // (div1.scrollHeight-div1.clientHeight)这个就是最大滚动位置,到底
// console.log(div1.scrollHeight,div1.clientHeight);
嫌麻烦可以直接设置为整个页面的整体高度 就到底了 这样不够准确
// div1.scrollTop=div1.scrollHeight;
// 操作滚动条触发执行函数
/* div1.onscroll=function(){
console.log(div1.scrollTop);//获取滚动条位置
} */
// IE8以后才有的方法
// 获取元素的矩形界限范围
// 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位置
// body 和 html没有边线,所有这两个值都是0
// console.log(document.body.clientLeft,document.body.clientTop)
// console.log(document.documentElement.clientLeft,document.documentElement.clientTop)
// 因为body和html标签都是最顶端,最外层,这两个值都是0
// console.log(document.body.offsetLeft,document.body.offsetTop)
// console.log(document.documentElement.offsetLeft,document.documentElement.offsetTop)
// document.body.scrollTop=100;
// 页面中的滚动是html的scrollTop和scrollLeft控制
// 早期的浏览器是body控制
// document.documentElement.scrollTop=200;