Js基础16：偏移量offset、滚动scroll、区c客户lient

云烟 • 2023年 12月 11日下午3:23 • 未分类 • 阅读 158

欢迎大家来到IT世界,在知识的湖畔探索吧!

1、偏移量offset

offset是偏移、位移、补偿的意思（取整数值四舍五入），表示元素的偏移量。

offsetHeight和offsetWidth

元素盒子模型的宽高（width/height + padding+border）

offsetLeft和offsetTop

1、表示当前元素距离它最近的相对父级（定位元素）的水平或者垂直距离。
2、如果它一直没有相对父级元素，默认指向body

offsetParent和parentNode

offsetParent 指的是最近的一个相对父级元素（默认指向body）
parentNode 就是直接父级（标签结构中的父子关系）

html和css代码

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
        * {
             margin: 0;
             padding: 0;
             border: 0;
             list-style: none;
        }
 
         div {
             width: 300px;
             height: 300px;
             border: 1px solid #000;
             margin: 100px;
             position: relative;
        }
 
         span {
             width: 100px;
             height: 100px;
             border: 1px solid #000;
             position: absolute;
             left: 120px;
             top: 30px;
        }
     </style>
 </head>
 
 <body>
     <div>
         <span></span>
     </div>
 </body>
 
 </html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

JavaScript代码

欢迎大家来到IT世界,在知识的湖畔探索吧! var oBox = document.getElementsByTagName('div')[0];
 console.log(oBox.offsetLeft); // 到文档左侧的距离
 console.log(oBox.offsetTop); // 到文档顶部的距离
 console.log(oBox.offsetWidth); // 获取盒子的实际占位宽度(border+contentWidth+padding)
 console.log(oBox.offsetHeight); // 获取盒子的实际占位高度(border+contentHeight+padding)
 console.log("-------------------------------------");
 var spanTag = document.getElementsByTagName('span')[0];
 console.log(spanTag.offsetLeft); // 到父盒子左侧的距离(前提是父盒子有定位，没定位则直接索引到body)
 console.log(spanTag.offsetTop); // 到父盒子顶部的距离(前提是父盒子有定位，没定位则直接索引到body)
 console.log(spanTag.offsetWidth); // 获取span的实际占位宽度(border+contentWidth+padding)
 console.log(spanTag.offsetHeight); // 获取span的实际占位高度(border+contentHeight+padding)
 console.log(spanTag.offsetParent); // 相对父级元素（默认指向body）

2、滚动scroll

scroll是长卷纸，卷轴的意思，表示浏览器滚动时元素的卷曲值。

scrollHeight和scrollWidth

代表获容器内部可滚动的宽度和高度（width/height + padding）
包括由于溢出而无法展示在网页的不可见部分

scrollTop和scrollLeft

相对父盒子，元素向上/向左卷曲出去（滚出去）的距离

html和css代码

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
        * {
             margin: 0;
        }
 
         #box {
             width: 200px;
             height: 200px;
             overflow: auto;
        }
 
         #content {
             width: 300px;
             height: 300px;
             background: #ccf;
             border: 1px solid #000;
             padding: 2px;
        }
     </style>
 </head>
 
 <body>
     <div id="box">
         <div id="content">
             <p> 客户：“这个图下班之前必须发给我！” 设计师：“好的！”
                第二天清早。客户：“图怎么还没发过来？” 设计师：“我还没下班呢…”。
                客户：“这个图下班之前必须发给我！” 设计师：“好的！”
                第三天清早。客户：“图怎么还没发过来？” 设计师：“我还没下班呢…”</p>
         </div>
     </div>
     <button id="btn">按钮</button>
 </body>
 
 </html>

JavaScript代码

欢迎大家来到IT世界,在知识的湖畔探索吧! var oBox = document.getElementById('box');
 var oContent = document.getElementById('content');
 var oBtn = document.getElementById("btn")
 console.log(oContent.scrollWidth); // 内容盒子的可滚动宽度
 console.log(oContent.scrollHeight); // 内容盒子的可滚动高度
 
 console.log(oBox.scrollWidth); // 限定了宽高的父盒子中，其内容盒子可滚动的宽度
 console.log(oBox.scrollHeight); // 限定了宽高的父盒子中，其内容盒子可滚动的高度
 
 oBtn.onclick = function () {
     console.log("-------------------------");
     console.log(oBox.scrollTop); // 获取内容盒子相对于父盒子已经滚动了多少高度
     console.log(oBox.scrollLeft); // 获取内容盒子相对于父盒子已经滚动了多少宽度
 }

3、客户区client

client获取的是元素的可视区域

clientWidth和clientHeight

不包含border在内的实际宽度（width/height + padding）

clientLeft和clientTop

打印出盒子左侧边框/顶部边框的厚度
几乎不用

案例：吸顶导航

html和css代码

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>吸顶导航</title>
     <style>
        * {
             margin: 0;
             padding: 0;
        }
 
         div {
             width: 100%;
             height: 100px;
             line-height: 100px;
             text-align: center;
             background: skyblue;
        }
     </style>
 </head>
 
 <body>
     <section>
         <p>段落</p>
        ...
         <p>段落</p>
         <div id="box">吸顶导航</div>
         <p>段落</p>
        ...
         <p>段落</p>
     </section>
 </body>
 
 </html>

JavaScript代码

 // 获取盒子的Y坐标
 var boxTop = box.offsetTop;
 console.log(boxTop);
 // scroll 滚动事件
 window.onscroll = function () {
     // 获取文档滚出的距离
     var winTop = document.documentElement.scrollTop;
     console.log(winTop);
     // 每当滚动的时候都需要获取超出窗口的范围 然后和盒子Y坐标做对比
     // 如果滚动距离大于等于盒子Y坐标，就设置成固定定位，否则去掉盒子定位
     if (winTop >= boxTop) {
         box.style.position = "fixed";
         box.style.top = 0;
    } else {
         box.style.position = "static";
    }
 }

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/35230.html