<!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>
 

jQuery 获取元素当前位置offset()与position()的更多相关文章

  1. Jquery获取元素的位置

    $(".curr_play").position().left //元素距离父级元素左侧位置 $(".curr_play").offset().left //元 ...

  2. jQuery获得元素位置offset()和position()的区别

    jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...

  3. jquery获取元素在文档中的位置信息以及滚动条位置（转）

    jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886     原文链接 原创 201 ...

  4. jquery 获取元素在浏览器中的绝对位置

    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...

  5. [转载]jquery获取元素索引值index()方法：

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  6. jquery获取元素索引值index()方法

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  7. jquery获取元素到屏幕底的可视距离

    jquery获取元素到屏幕底的可视距离 要打对号的图里的height(我自称为可视高度:滚动条未滑到最底端)  不是打叉图里的到页面底部(滚动条到最底部时的height)(offset().top方法 ...

  8. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  9. jquery获取元素索引值index()

    jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 ...

随机推荐

  1. python多线程与线程

    进程与线程的概念 进程 考虑一个场景:浏览器,网易云音乐以及notepad++ 三个软件只能顺序执行是怎样一种场景呢?另外,假如有两个程序A和B,程序A在执行到一半的过程中,需要读取大量的数据输入(I ...

  2. Java Thread系列（九）Master-Worker模式

    Java Thread系列(九)Master-Worker模式 Master-Worker模式是常用的并行设计模式. 一.Master-Worker 模式核心思想 Master-Worker 系统由两 ...

  3. linux 关键发行版及其关系图

  4. linux网络编程模型

    1.编程模型 Linux网络编程模型是基于socket的编程模型

  5. 简述json模块

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写,他的数据结构与Python中的字典一样,键值对来表示数据间的关系,可以包含列表. 在编写 ...

  6. vue生命周期小笔记

    一张图谨记vue每个生命周期的获取状态 beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发 ...

  7. win10自带虚拟机安装CentOS7系统（转）

    出处:http://blog.csdn.net/bimabushihaodongxi/article/details/53677490 话说工欲善其事,必先利其器,在我准备学习Linux之前先要完成l ...

  8. CLOB 和 BLOB

    An SQL CLOB is a built-in type that stores a Character Large Object as a column value in a row of a ...

  9. 如何从官网开始 mongo java

    http://docs.mongodb.org/ecosystem/drivers/ MongoDB Driver Documentation Getting Started Installation ...

  10. Oracle Alert - APP-ALR-04108: SQL error ORA-01455

    SELECT OD.ORGANIZATION_CODE, TO_CHAR(H.ORDER_NUMBER), --ORACLE ALERT 自动转数字类型最长11位,转字符处理解决APP-ALR-041 ...