今天没标题

封装函数（通过id名获取元素及变速动画的js部分）
function my$(id){
return document.getElementById(id);
}

//用三元表达式 封装获取属性值
function getStyle(element, attr){
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] :element.currentStyle[attr];
}

// element 元素
// json 传对象
// animate(my$(“dv”), 400, “width”)
// element 元素
// json 传对象
// fn 回调函数—> 把函数当做参数使用
function animate( element, json ,fn) {
//清除定时器
clearInterval(element.timeId)
element.timeId = setInterval(function () {
var flag = true;// 假设到达目标为止
for(var attr in json){
//获取元素的当前位置
var current = parseInt(getStyle(element, attr));// attr–>height 返回是 200px 化整
//目标的值
var target = json[attr];
//移动的步数
var step = (target - current) /10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current +“px”;
//如果 有一个当前的位置 不等于 目标位置 , 让 flag 为false
if( current != target){
flag = false;
}
}
// 循环过后, 如果flag为true, 则证明都到达了目标位置, 则清除定时器
if(flag){
//清除定时器
clearInterval(element.timeId);
//所有的属性达到目标后才调用这个函数.
//如果用户传了fn, 则调用
if(fn){
fn();
}

    }
    //测试代码
    console.log("目标位置:"+target+",当前位置:"+current+",每次移动的步数:"+step)
},20)

}

offset系列
console.log(my $("dv").offsetWidth); console.log(my$(“dv”).offsetHeight);
console.log(my $("dv").offsetTop); console.log(my$(“dv”).offsetLeft);
/*
没有脱离文档流时:
* offsetLeft: 父级元素的padding+ 自己的margin值
*
* 脱离文档流: 主要是自己的left和自己的margin
*
* */

scroll系列

• scrollWidth : 元素中内容实际的宽, 如果多少内容就是元素本身的宽
  • scrollHeight : 元素中内容实际的高,如果多少内容就是元素本身的高
  • scrollTop: 向上卷曲出去的距离
  • scrollLeft: 向左卷曲出去的距离