相关尺寸设置与获取以及滚动事件

最新推荐文章于 2023-09-17 16:47:53 发布

yjx_43750162

最新推荐文章于 2023-09-17 16:47:53 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/97631340

版权

获取和设置元素的尺寸

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
    }
   </style>
 </head>
 <body>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
 <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
   //获取元素
   $div=$("div");
   //获取宽度
   console.log($div.width());//200
   //获取高度
   console.log($div.height());//200
   //包含padding的宽度
   console.log($div.innerWidth());//240
  //包含padding的高度
   console.log($div.innerHeight());//240
   //包含padding和border的宽度
   console.log($div.outerWidth());//244
   //包含padding和border的高度
   console.log($div.outerHeight());//244
   //包含padding、border、margin的宽度
   console.log($div.outerWidth(true));//284
   //包含padding、border、margin的高度
   console.log($div.outerHeight(true));//284
})
  </script>
 </body>
</html>

获取元素相对页面的绝对位置

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
   }
   #div_01{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: #0000FF;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
   }
  </style>
 </head>
 <body>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
  <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
   //获取相对页面的绝对位置 
   var x=$div.offset().left;
   console.log(x);//20
   var y=$div.offset().top;
   console.log(y);//20
   //获取该元素距离其父元素的位置
   var $div2=$("#div2");
   var x=$div2.offset().left;
   console.log(x);//42
   var y=$div2.offset().top;
   console.log(y);//42
   })
  </script>
 </body>
</html>

获取可视区高度

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
   }
 </style>
 </head>
 <body>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
  <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
   //获取可视区的宽度和高度
   console.log($(window).width());//531
   console.log($(window).height());//762
   })
  </script>
 </body>
</html>

获取页面高度

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
    }
  </style>
 </head>
 <body>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
//获取页面的宽度和高度
   console.log($(document).width());//531
   console.log($(document).height());//762
})
  </script>
 </body>
</html>

获取页面滚动距离及滚动事件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
   }
   #div_01{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: #0000FF;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
   }
  </style>
 </head>
 <body>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
  <div style="width: 200px; margin: 20px; height: 200px;padding: 20px;  border: 2px solid deeppink; position: relative;">
   <div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
  </div>
  
  <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
   //获取页面的滚动距离
   console.log($(document).scrollLeft());
   console.log($(document).scrollTop());
      //上述代码是不能获取到值的，因为没有添加滚动事件
      //滚动事件代码如下
   var $div3=$('<div id="div_01">div</div>');
   $('body').append($div3);
   $(document).scroll(function(){
//     console.log("333");
     if($(document).scrollTop()>=200){
        $div3.slideDown(2000);
     }else{
      $div3.hide(1000); // 设置 隐藏
     }
    })
   })
  </script>
 </body>
</html>

yjx_43750162

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相关尺寸设置与获取以及滚动事件

获取和设置元素的尺寸<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ...
复制链接

扫一扫