web前端 -- Day22 js基础

元素的样式

元素的样式属性是无法直接通过：对象.style.属性来获取的，（样式在style属性中设置）
offset系列：获取元素的宽高
offsetWidth：元素的宽 (有边框)
offsetHeight：元素的高（有边框）
offsetTop：元素距离上边位置的值
offsetLeft：元素距离左边位置的值

scroll系列：卷曲出去的值
scrollWidth：元素中内容的实际宽度 (没有有边框)，如果没有内容就是元素的宽度
scrollHeight：元素中内容的实际高度 (没有有边框)，如果没有内容就是元素的高度
scrollTop：向上卷曲出去的距离
scrollLeft：向左卷曲出去的距离

client系列:可视区域
clientWidth：可视区域的宽 (没有有边框) ，边框内部的高度
clientHeight：可视区域的高 (没有有边框) ，边框内部的高度
clientTop：上边边框的宽度
clientLeft：左边边框的宽度

// 获取浏览器向上卷曲出去的距离的值，向左卷曲出去的距离
function getScroll(){
    var obj = {};
    var top = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop||0;
    var left = window.pageXoffset || document.documentdElement.scrollLeft || document.body.scrollLeft;
    obj.top = top;
    obj.left = left
    return obj;
}

// 获取任意一个元素的任意个样式的属性值
function getStyle(element,attr) {
    return  window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}

// 文档的鼠标移动事件
// 对象 -- 事件 -- 事件处理函数，事件触达了，函数的代码就会被执行
// arguments.length可以得出：事件处理函数实际上是有关系的，是一个对象 -- > 事件参数对象
// 谷歌和火狐中都有e这个事件参数对象IE8中没有，在IE8中用window.event代替
document.onmousemove = function(e){
    // console.log("图片跟着鼠标飞",arguments.length);
    console.log("图片跟着鼠标飞",e);
    e=window.event||e;
    // 可视区域
    // document.title = e.clientX +"===="+e.clientY;
    // my$("im").style.left =   e.clientX+"px";
    // my$("im").style.top =   e.clientY+"px";
    
    my$("im").style.left =   e.clientX+"px" + getScroll(my$("im"));
    my$("im").style.top =   e.clientY+"px" + getScroll(my$("im"));;
}

控件展示隐藏

隐藏div -- 不占位
my$("dv").style.display = "none";
隐藏div -- 占位
my$("dv").style.visibility = "hidden";
隐藏div -- 占位
my$("dv").style.opacity = 0;
隐藏div -- 占位

my$("dv").style.height = "0px";
my$("dv").style.border = "0px solid red";