zoukankan      html  css  js  c++  java
  • jQuery 获取元素当前位置offset()与position()

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .father {
          width: 400px;
          height: 400px;
          background-color: pink;
          position: relative;
          margin: 100px;
        }
        .son {
          width: 200px;
          height: 200px;
          background-color: red;
          position: absolute;
          top: 100px;
          left: 100px;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son"></div>
      </div>
      <script src="jquery-1.12.4.js"></script>
      <script>
        $(function () {
    
          //获取元素的相对于document的位置
          console.log($(".son").offset());
          console.log($(".son").offset().left);
          console.log($(".son").offset().top);
          //设置元素的left和top
          $(".son").offset({
            left: 300,
            top: 300
          })
          //函数方式的去设置 
          $(".son").offset(function (v, i) {
            var a = {};
            a.left = 400;
            a.top = 400;
            return a;
          })
          //获取元素相对于有定位的父元素的位置
          console.log($(".son").position());
          console.log($(".son").position().left);
          console.log($(".son").position().top);
        });
      </script>
    </body>
    </html>
     
  • 相关阅读:
    二分专题
    数据结构-图
    Linux文件基本属性(以ls -l输出为例解释)
    shell脚本版素数筛
    Linux whereis,which
    Linux外网代理配置
    Linux三剑客
    Elasticsearch集群搭建(Linux)
    测试之路
    我的另一半
  • 原文地址:https://www.cnblogs.com/wanguofeng/p/10784349.html
Copyright © 2011-2022 走看看