1.
offsetParent 获取的最近的定位的父元素
offsetLeft/offsetTop 是相对于offsetParent的距离
offsetHeight/offsetWidth 获取盒子的大小 border + height + padding
<style> #box { width: 200px; height: 200px; background-color: #ff0000; } #child { width: 100px; height: 100px; margin-left: 10px; background-color: #00ff00; } </style> </head> <body> <!--offsetParent--> <div id="box"> <div id="child"> </div> </div> <script> var child = document.getElementById("child"); //border + padding + width //offsetLeft获取的是相对于offsetParent的距离 console.log(child.offsetLeft); //如果设置的子盒子有定位的父元素，offsetParent就是定位的父元素 //此处子盒子的父元素没有定位，offsetParent就是body console.log(child.offsetParent); //父节点--box console.log(child.parentNode); </script>
2 scrollHeight 滚动内容的高度（height + padding 不包括边框）
<style> #box{ width: 100px; height: 100px; background-color: #0000ff; } </style> </head> <body> <div id="box"> 哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈 </div> <script> function $$(id){ return document.getElementById(id); } </script> <script> var box=$$("box"); console.log(box.scrollHeight); //获取撑开的大小 console.log(box.offsetHeight); //获取盒子的大小 </script>
注册 onscroll 滚动事件
<script> // var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; //滚动条事件 window.onscroll=function(){ console.log(scroll().scrollTop); } </script>
//4 获取页面滚动出去的距离
//document.body.scrollLeft ||
document.documentElement.scrollLeft
//document.body.scrollTop ||
document.documentElement.scrollTop
这里会产生浏览器的兼容问题，ie8记一下版本不支持document.body.scrollLeft,只支持document.documentElement.scrollLeft因此我们需要封装这个函数
/**scrollTop与scrollLeft兼容性封装
*
* @returns {{scrollTop: number, scrollLeft: number}}
*/
function scroll(){
return{
scrollTop:document.body.scrollTop||document.documentElement.scrollTop,
scrollLeft:document.body.scrollLeft||document.documentElement.scrollLeft
};
}
动画函数的封装
//获取任意样式
function getStyle(element, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}
}
//在修改单个属性的基础上修改
//1 修改参数，传入对象
//2 遍历对象，获取到所有的属性
//3 把target修改 成 attrs[attr]
function animate(element, attrs, fn) {
//清除定时器
if(element.timerId) {
clearInterval(element.timerId);
}
element.timerId = setInterval(function () {
//问题：当多个属性的最小值到达之后，动画就会停止
//解决：当所有属性都到达目标值，动画停止
//假设所有的属性都到达目标值，停止定时器
var isStop = true;
//遍历多个属性
for(var attr in attrs) {
if(attr === "zIndex") {
element.style[attr] = attrs[attr];
}else if(attr === "opacity") {
//获取当前元素样式属性的值
var current = parseFloat(getStyle(element, attr)) || 0;
current *= 100;
//每一次step的值会越来越小
var step = (attrs[attr]*100 - current)/8;
//三目运算符判断步长为正数向上取整 如果为负数向下取整
step = step > 0 ? Math.ceil(step): Math.floor(step);
current += step;
element.style[attr] = current/100;
//更改ie下的透明度（透明度的兼容问题）
element.style.filter = "alpha(opacity="+ current +")";
//如果有一个属性没有到达目标值，不能停止动画
if(step != 0) {
isStop = false;
}
}else{
//获取当前元素样式属性的值
var current = parseInt(getStyle(element, attr)) || 0;
//每一次step的值会越来越小
var step = (attrs[attr] - current)/8;
//正数 向上取整 负数 向下取整
step = step > 0 ? Math.ceil(step): Math.floor(step);
current += step;
element.style[attr] = current + "px";
//如果有一个属性没有到达目标值，不能停止动画
if(step != 0) {
isStop = false;
}
}
}
//停止定时器