<!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. 分析一则halcon抓边拟合直线的小案例

    例图: 完整算法: read_image (Image, 'C:/Users/Administrator/Desktop/1.png') threshold (Image, Regions, , ) ...

  2. (OK) 国内常用NTP服务器地址及IP

    https://www.douban.com/note/171309770/ ntpdate s2c.time.edu.cn      北京邮电大学 ntpdate s2m.time.edu.cn   ...

  3. CSS —— line-height详解

    本文导读:“行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元 ...

  4. Xcode6制作动态及静态Framework[repost]

    有没有写SDK或者要将一些常用的工具类做成Framework的经历? 你或许自己写脚本完成了这项工作,相信也有很多的人使用 iOS-Universal-Framework ,随着xCode6的发布,相 ...

  5. awk基础05-自定义函数和脚本

        在之前文章中,我们都是在命令行中写一些简短的awk命令,而awk做为一门解释型语言,一样是支持脚本运行的. 基本语法 #!/bin/awk -f # 注释 awk 脚本体 #!:同shell, ...

  6. HttpClient Timeout

    1. Overview This tutorial will show how to configure a timeout with the Apache HttpClient 4. If you ...

  7. 疯狂JAVA讲义---第十五章：输入输出（上）流的处理和文件

    在Java中,把这些不同类型的输入.输出抽象为流(Stream),而其中输入或输出的数据称为数据流(Data Stream),用统一的接口来表示,从而使程序设计简单明了. 首先我要声明下:所谓的输入输 ...

  8. iperf命令 +speedtest-cli

    iperf工具可以用来测量TCP或者是UDP的网络吞吐量,即bandwidth(带宽)测试.  iPerf的主要目标是帮助调整特定路径上的TCP连接. 众所周知,TCP最基本的调整问题是调整TCP窗口 ...

  9. xaml mvvm(2)之属性绑定

    通过微软INotifyPropertyChanged接口,可以实现对UI实时更新,不管是数据源或者目标对象,可以实现相互通知. 下面我们根据INotifyPropertyChanged编写一个扩展类. ...

  10. （zxing.net）二维码PDF417的简介、实现与解码

    一.简介 二维码PDF417是一种堆叠式二维条码.PDF417条码是由美国SYMBOL公司发明的,PDF(Portable Data File)意思是“便携数据文件”.组成条码的每一个条码字符由4个条 ...