web前端 -- Day22 js基础_获取向上卷曲的距离web前端-优快云博客

本文链接：https://blog.youkuaiyun.com/Cituses/article/details/88816506

本文介绍了如何使用JavaScript操作DOM元素的样式属性，包括获取元素样式、宽度、高度等属性的方法，以及如何实现元素的位置控制和显示隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素的样式

元素的样式属性是无法直接通过：对象.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";