offsetLeft 可以获取某个表签到定位父盒子之间的距离
得到的是数值类型,是只读的.不能改变.
运动公式
元素的位置(新的)=元素位置(旧的)+步长
leader=leader + step
offsetLeft计算方式:
当前元素的左边框到定位的父盒子的左边框之间的距离.
边框到边框.
由于盒子的位置可能无法整除步数,这时无法直接运动到指定位置
有可能leader!=target 永远成立.
我们需要判断leader和target之间的距离,与step之间的关系.
1,如果leader与target的距离大于1步,正常走.
2,如果leader与target的距离小于1步,直接走到target位置.
offsetWidth, 元素的真实宽度(除了margin以外),值是数值类型,只读.
如果多次设置不同盒子的运动,只是后面的运动会清除掉前面设置的运动效果.
造成这一问题的原因,是animate函数依赖于外部全局变量timer
设置局部变量也不可以,自己的多次点击,还是可以加速.
我么可以给每个标签设置自定义属性.用于保存自身运动时的定时器id.
缓动时
offsetLeft这种取值方式会四舍五入
造成影响
对step进行取整操作
根据step的正负
step=step>0? Math.ceil(step):Math.floor(step)
step=Math.ceil(step);
opacity 透明度
异步任务的执行晚于同步任务
offsetLeft 当前元素到定位父盒子距离(得到数值类型)
(边框到边框)
offsetTop 当前元素到定位父元素高度距离(得到数值类型)
offsetWidth 除了margin其他都算
offsetHeight 除了margin其他高度都算
offsetParent 可以获取到当前元素外面的定位父盒子
(定位的)
parentNode父元素一定是亲爹
定位父盒子可能不是,干爹
scroll系列
scrollHeight
内容超出盒子: 从当前元素顶边框内测到内容底部
内容不超出盒子:直接计算边框直接距离
scrollWidth与scrollHeight计算方式相同
scrollTop被卷曲的内容高度
当元素滚动的时候访问scrollTop的值(onscroll)
box.onscroll = function () {
//内容被滚动超过了顶边框的下侧
console.log(this.scrollTop);
};
内容被滚动超过了顶边框的下侧。
scrollLeft的计算方式与scrollTop同理。
如果给document设置onscroll事件,在ie中的支持有问题
获取页面卷曲的高度有许多方式
documentElement是指html标签在里面的写法.不写html,写
documentElement
clientHeight 元素内部空间的高度(height+padding)
scrollHeight的最小值和clientHeight相同
clienWidth同理;
clientLeft clientTop 相当于元素的borderLeft和borderTop(这俩玩意几乎没用)
如果盒子具有左侧滚动条,这时clientLeft会包含滚动条的宽度。
当窗口大小改变时,去获取可视区域的宽高 onresize
1 .clientX与clientY
window.onload=function(){
document.onclick=function(ev){
var oEvent=ev||event; alert(oEvent.clientX+","+oEvent.clientY);
}
}
oEvent.clientX是指鼠标到可视区左边框的距离。 oEvent.clientY是指鼠标到可视区上边框的距离。
2.offsetWidth、offsetHeight、offsetLeft和offsetTop window.onload=function(){
var oDiv=document.getElementById("div1"); alert(oDiv.offsetWidth);
alert(oDiv.offsetHeight);
alert(oDiv.offsetLeft);
alert(oDiv.offsetTop);
}
offsetWidth是指div的宽度(包括div的边框)
offsetHeight是指div的高度(包括div的边框)
offsetLeft是指div到整个页面左边框的距离(不包括div的边框) offsetTop是指div到整个页面上边框的距离(不包括div的边框)
3.scrollTop、scrollLeft、scrollWidth和scrollHeight
scrollTop是指可视区顶部边框与整个页面上部边框的看不到的区域。 scrollLeft是指可视区左边边框与整个页面左边边框的看不到的区域。 scrollWidth是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度(包括边框)
scrollHeight是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度(包括边框)
4.clientWidth、clientHeight、clientLeft和clientTop
clientWidth是指可视区的宽度。
clientHeight是指可视区的高度。
clientLeft获取左边框的宽度。
clientTop获取上边框的宽度。
网友评论