其他操作(获取高宽和偏移量)1offset01.html

游鹄君2025年8月24日大约 1 分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>其他操作(获取高宽和偏移量)</title>
  <style type="text/css">
    *{margin:0px;padding:0px;}
    #all{width:400px;height:400px;border:solid 1px blue;position:absolute;left:100px;top:50px;}
    #dvs{width:150px;height:200px;border:solid 1px green;position:absolute;left:30px;top:20px;}
  </style>
</head>
<body style="width:1600px; height:1600px">
  <div id='all'>
    <div id='dvs'></div>
  </div>
</body>
<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
<script type="text/javascript">
  
  //获取相对于文档的偏移量
  var a =$('#dvs').offset();
  console.log(a);
    //向下偏移
  console.log(a.top);
    //向右偏移
  console.log(a.left);
  
  //获取相对父级的偏移
  var b=$('#dvs').position();
  console.log(b);
    //向下偏移
  console.log(b.top);
    //向右偏移
  console.log(b.left);
 
  // 获取或设置滚动条的位置
  //设置文档的隐藏的距离--->带参数
  $(window).scrollTop(100);
  $(window).scrollLeft(200);
  //获取文档的隐藏的距离--->不带参数
  var c=$(window).scrollTop();
  var d=$(window).scrollLeft();
 
  console.log(c);
  console.log(d);
 
  //获取可视区域的宽和高
  var e=$(window).width();
  var f=$(window).height();
 
  console.log(e);
  console.log(f);
 
  //获取文档的宽和高
  var g=$(document).width();
  var h=$(document).height();
 
  console.log(g);
  console.log(h);
 
  //获取标签元素的宽和高
 
  var i=$('#all').width();
  var j=$('#all').height();
 
  console.log(i);
  console.log(j);
 
 
</script>
</html>