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;
}
}
}
//停止定时器
时间： 2025-01-15 22:24:14