1.client元素内容区域宽高
clientWidth对象可见的宽度
clientHeight对象可见的高度
clientTop和clientLeft这两边返回的是元素周边边框的宽度
注意!!!
clientWidth=width+padding
clientHeight=height+padding
client不算border和padding
2.offset元素所占位置大小
offsetWidth对象的宽
offsetHeight对象的高
offsetTop
offsetLeft返回上级带有定位盒子的左边和上边,如果父级没有定位,就以body为准
注意!!!
offsetWidth=width+border+padding
offsetHeight=height+border+padding
<div id="fbox">
<div id="box"></div>
* {
padding: 0;
margin: 0;
}
#box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
#fbox {
width: 600px;
height: 600px;
border: 1px solid #000;
margin: auto;
position: relative;
}
var box=document.getElementById('box');
var x=1;
var mx=0;
setInterval(function(){
mx+=x;
box.style.left=mx+'px';
var fk=fbox.offsetWidth;
var bk=fbox.offsetHeight;
if(bk+mx>=fk||mx<0){
x*=-1;}
},1000)
3.获取屏幕的宽高
window.innerWidth;
window.innerHeight;