偏移量+客户区大小+滚动偏移

最新推荐文章于 2024-07-28 15:09:23 发布

yyy_wj

最新推荐文章于 2024-07-28 15:09:23 发布

阅读量530

点赞数

本文链接：https://blog.youkuaiyun.com/yyy_wj/article/details/97920169

版权

本文探讨了前端开发中元素尺寸控制的核心概念，包括offset系列、client系列和scroll系列的使用，通过实例展示了如何获取元素的偏移量、客户区大小及滚动偏移，实现如固定导航栏等常见网页布局效果。

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

1、偏移量

offset系列:获取元素的相关的样式属性的值
offsetWidth:获取元素的宽(有边框)
offsetHeight:获取元素的高(有边框)
offsetLeft:获取元素距离左边位置的值
offsetTop:获取元素距离上面位置的值
在style标签中设置的样式属性获取不到，style属性中设置的样式属性是可以获取到的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    input{
      top: 250px;
      position: absolute;
    }
    #dv1{
      width: 200px;
      height: 150px;
      background-color: red;
      position: absolute;
      left: 100px;
      top: 30px;
    }
    #dv2{
      width: 100px;
      height: 50px;
      background-color: green;
    }
  </style>
 
</head>
<body>
<div id="dv1">
  <div id="dv2"></div>
</div>
<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>

  //红色div的宽和高
  my$("btn").onclick=function () {
  console.log(my$("dv1").offsetWidth);
  console.log(my$("dv1").offsetHeight);
  console.log(my$("dv1").offsetLeft);
  console.log(my$("dv1").offsetTop);
  };
</script>
</body>
</html>

2、客户区大小（可视区域）

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

案例：鼠标跟着图片飞

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img{
	position: absolute;
    }
  </style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="im">
<script src="com.js"></script>
<script>

	
  //鼠标在页面中移动,图片跟着鼠标移动
  document.onmousemove=function (e) {
    //鼠标的移动的横纵坐标
    //可视区域的横坐标
    //可视区域的纵坐标
    //IE8 window.event
    e=window.event||e;
    my$("im").style.left=e.clientX+"px";
    my$("im").style.top=e.clientY+"px";
  };
  

</script>
</body>
</html>

3、滚动偏移

scroll系列:卷曲

scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽

scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 300px;
      height: 200px;
      border: 2px solid red;
      overflow: auto;
    }
    input{
      left: 330px;
      position: absolute;
      top:20px;

    }
  </style>

my$("btn").onclick=function () {

  console.log(my$("dv").scrollWidth);//元素中内容的实际的宽
  console.log(my$("dv").scrollHeight);//元素中内容的实际的高
  console.log(my$("dv").scrollTop);//向上卷曲出去的距离
  console.log(my$("dv").scrollLeft);//向左卷曲出去的距离
};

  //时时的获取向上卷曲出去的距离的值

  //div的滚动事件
  my$("dv").onscroll=function () {
    console.log(this.scrollTop);
  };

案例：固定导航栏

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    img {
      vertical-align: top;
    }

    .main {
      margin: 0 auto;
      width: 1000px;
      margin-top: 10px;

    }

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
<div class="top" id="topPart">
  <img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
  <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
  <img src="images/main.png" alt=""/>
</div>
<script src="common.js"></script>
<script>


  //获取页面向上或者向左卷曲出去的距离的值
  function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
  }

  //滚动事件
  window.onscroll=function () {
    //向上卷曲出去的距离和最上面的div的高度对比
    if(getScroll().top>=my$("topPart").offsetHeight){
      //设置第二个div的类样式
     my$("navBar").className="nav fixed";
      //设置第三个div的marginTop的值
      my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";
    }else{
      my$("navBar").className="nav";
      my$("mainPart").style.marginTop="10px";
    }
  };


</script>
<script>