offset([coordinates])

概述

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。大理石平台价格表

参数

coordinates{top,left}ObjectV1.4

必需。规定以像素计的 top 和 left 坐标。

可能的值:

  • 值对,比如 {top:100,left:0}
  • 带有 top 和 left 属性的对象

function(index,coords)functionV1.4

规定返回被选元素新偏移坐标的函数。

  • index - 可选。接受选择器的 index 位置
  • oldvalue - 可选。接受选择器的当前坐标

示例

无参数描述:

获取第二段的偏移

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
结果:
<p>Hello</p><p>left: 0, top: 35</p>

参数coordinates 描述:

获取第二段的偏移

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
$("p:last").offset({ top: 10, left: 30 });

offset([coordinates])的更多相关文章

  1. jquery 中的 offset()

    一.语法: 1.返回偏移坐标 $(select).offset(); top:  $(select).offset().top; left:  $(select).offset().left; 2.设 ...

  2. .offset()与.position()区别

    jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下:   offset():获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left ...

  3. offset()与position()的区别

    jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left ...

  4. Python之路Day17-jQuery

    本节内容: jQuery 参考:http://jquery.cuishifeng.cn/ 模块  <==>类库 Dom/Bom/JavaScript的类库 版本:1.x   1.12 2. ...

  5. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  6. jquery css事件编程 位置 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  8. jQuery语法介绍

    来自:http://www.cnblogs.com/ccorz/p/5803353.html jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1 ...

  9. jquery之css操作

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. Kubernetes---Pod状态示例

    ⒈Pod 中只有一个容器并且正在运行,容器成功退出 ·记录事件完成  ·如果restartPolicy为:  Always:重启容器:Pod phase仍为Running  OnFailure:Pod ...

  2. Block Breaker HDU - 6699(深搜,水,写下涨涨记性)

    Problem Description Given a rectangle frame of size n×m. Initially, the frame is strewn with n×m squ ...

  3. xss level11

    Level11 (1) (2)毫无头绪,查看PHP源代码发现,是从头文件的referer获取的输入. (3)用Burp抓包,修改头文件如下: (4)再点击Proxy界面的forward,回到浏览器页面 ...

  4. S02_CH10_ User GPIO实验

    S02_CH10_ User GPIO实验 在之前的第四章课程中,我们详细的讲解了如何在VIVADO软件下封装一个简单的流水灯程序.在ZYNQ开发过程中,有时候我们可能会需要与ARM硬核进行通信,在这 ...

  5. shell习题第14题:

    [题目要求] 需求,根据web服务器的访问日志,把一些请求高的ip给拒绝掉,并且每隔半小时把不再发起请求或者请求量很小的ip给解封 假设: 1. 一分钟内请求量高于100次的ip视为不正常的请求 2. ...

  6. k8s之网络插件flannel及基于Calico的网络策略

    1.k8s网络通信 a.容器间通信:同一个pod内的多个容器间的通信,通过lo即可实现; b.pod之间的通信:pod ip <---> pod ip,pod和pod之间不经过任何转换即可 ...

  7. 怎样获取当前文档所有的元素节点(即html标签节点)

    方法1. 使用 document.getElementsByTagName("*"); 方法2. 使用document.querySelectorAll("*" ...

  8. mysql索引实现原理

    什么是索引: 索引是一种高效获取数据的存储结构,例:hash. 二叉. 红黑. Mysql为什么不用上面三种数据结构而采用B+Tree: 若仅仅是  select * from table where ...

  9. bootstrap 处理警告

    $("#id").bootstrapValidator({}).on('success.field.bv', function (e, data) { })

  10. Lab2 Report

    1.安装SeleniumIDE插件 a)安装Firefox 17.0 - 56.*版本的firefox,下载地址为:http://ftp.mozilla.org/pub/firefox/release ...