<!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. CentOS7下NFS服务安装及配置

    系统环境:CentOS Linux release 7.4.1708 (Core) 3.10.0-693.el7.x86_64 软件版本:nfs-utils-1.3.0-0.48.el7_4.x86_ ...

  2. c# windows服务的制作

    一.创建一个Windows Service )创建Windows Service项目 )对Service重命名 将Service1重命名为你服务名称,这里我们命名为Servicetest. 二.创建服 ...

  3. 开始第一个Android应用程序

    Android应用程序建立在应用程序框架之上,所以Android编程就是面向应用程序框架API编程---与编写普通的Java SE没有太大区别,只是增加了一些API. 1.使用eclipse开发第一个 ...

  4. QQ互联

    [移动应用接入概述] QQ互联开放平台为第三方移动应用提供了丰富的API.第三方移动应用接入QQ互联开放平台后,即可通过调用平台提供的API实现用户使用QQ账号登录移动应用功能,且可以获取到腾讯QQ用 ...

  5. 高性能mysql第三版（文摘）

    第1章 mysql架构与历史 1.1处理和存储相分离,用户可以选择合适的存储引擎 1.2并发控制 表锁:开销小 行级锁:开销大 1.3事务 acid特性:原子性,一致性,隔离性,持久性 1.4 多版本 ...

  6. docker 初始化执行.sh修改.properties文件

    1.testmysql.properties rootuser=aarootpass=bb 2.用环境变量修改testmysql.properties里面的rootuser和rootpass的值的脚本 ...

  7. Redis Quick Start [熟练版]

    一.下载解压 wget http://download.redis.io/redis-stable.tar.gztar xvzf redis-stable.tar.gzcd redis-stable ...

  8. swift 动画

    // //  ViewController.swift //  Anamation // //  Created by su on 15/12/9. //  Copyright © 2015年 tia ...

  9. 20169205实验四 Android程序设计

    20169205实验四 Android程序设计 实验内容及步骤 (一)第一个android studio项目 android studio与eclipse的传统安卓开发有一些不同之处 android ...

  10. postman的使用方法详解！最全面的教程

      文章来源:http://www.cnplugins.com/tool/specify-postman-methods.html     一 简介 Postman 是一款功能超级强大的用于发送 HT ...