一套方便的获取元素尺寸的办法,可以检测盒子的宽高
包括宽高本身,padding,border。不包括margin
offsetHeight = height+padding+border;(不加margin)
offsetWidth = width+padding+border;(不加margin)
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #000;
margin: 100px;
background-color: pink;
}
var div = document.getElementsByTagName("div")[0];
console.log(div.offsetHeight);
console.log(typeof div.offsetHeight);
返回距离上级盒子(带有定位)左边的位置,如果父级都没有定位则以body为准,offsetLeft从父亲的padding开始算到子元素的border为止,父亲的border不算
offsetLeft = 父元素的padding-left+子元素的margin-left(不设置子元素绝对定位的情况下)
offsetLeft = 子元素的left值+子元素的margin-left(设置子元素绝对定位的情况下)
offsetTop = 父元素的padding-top+子元素的margin-top(不设置子元素绝对定位的情况下)
offsetTop = 子元素的top值+子元素的margin-top(设置子元素绝对定位的情况下)
.box1 {
width: 300px;
height: 300px;
padding: 20px;
margin: 10px;
position: relative;
border: 10px solid #000;
background-color: pink;
}
.box2 {
width: 100px;
height: 100px;
padding: 10px;
margin: 40px;
border: 10px solid #000;
background-color: red;
position: absolute;
left: 10px;
top: 10px;
}
var box2 = document.getElementsByClassName("box2")[0];
console.log(box2.offsetLeft);
当把子元素的绝对定位去掉后
1、返回该对象的父级(带有定位)
如果当前元素的父级元素没有进行CSS定位(position为absolute或relative,fixed),offsetParent为body。
2、如果当前元素的父级元素中有CSS定位 (position为absolute或relative,fixed),offsetParent取最近的那个父级元素。
var box3 = document.getElementsByClassName("box3")[0];
console.log(box3.offsetParent);
style.left在父系盒子中都没有定位的情况下,会以body为准。
div.offsetLeft = 100; div.style.left = "100px";
style.left和style.top可以赋值;offsetLeft和offsetTop只能获取值
div.offsetLeft = Math.round(div.style.left);
var div = document.getElementsByTagName("div")[0];
console.log(div.style.left);
console.log(div.offsetLeft);
scrollWidth和scrollHeight不包括border和margin
高度有一个特点:如果文字超出了盒子,高度为超出盒子的内容的高。不超出是盒子本身高度
scrollWidth = width + padding;(不包括 border和margin)
scrollHeight = contentHegiht>height ? contentHegiht : height;
IE8以下,不包括IE8,为盒子本身内容的多少。
人生自古谁无死,留取丹心照汉青。
人生自古谁无死,留取丹心照汉青。
人生自古谁无死,留取丹心照汉青。
人生自古谁无死,留取丹心照汉青。
人生自古谁无死,留取丹心照汉青。
人生自古谁无死,留取丹心照汉青。
div {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 10px solid #000;
}
var div = document.getElementsByTagName("div")[0];
console.log(div.scrollWidth);
console.log(div.scrollHeight);
document.body.scrollTop:网页被卷去的头部
document.body.scrollLeft:网页被卷去的左部
但是scrollTop存在兼容性问题:
document.title = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
body {
height: 5000px;
width: 5000px;
}
window.onscroll = function () {
console.log(document.body.scrollTop);
console.log(document.body.scrollLeft);
}
1、clientWidth:获取网页可视区域宽度(两种用法)
clientHeight 获取网页可视区域高度(两种用法)
调用者不同,意义不同:
盒子调用:指盒子本身。
body/html调用:可视区域大小。
2、clientX:鼠标距离可视区域左侧距离(event调用)
clientY:鼠标距离可视区域上侧距离(event调用)
3. clientTop:盒子的上border
clientLeft :盒子的左border
.box {
width: 100px;
height: 100px;
background-color: pink;
padding: 100px;
margin: 100px;
border: 234px solid #000;
}
var box = document.getElementsByTagName("div")[0];
var bd=document.body;
console.info(bd.clientWidth);
console.info(bd.clientHeight);
//不包括margin和border
//padding+width
console.log(box.clientWidth);
//clientTop获取的是上border
console.log(box.clientTop);
console.log(box.clientLeft);