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. JS数据拷贝

    JS的拷贝可分为浅拷贝和深拷贝: 浅拷贝:如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,这样我们无论在新旧数组进行了修改,两者都会发生变化. 深拷贝 ...

  2. 2019HDU暑期多校训练-1004equation-方程求解

    Description You are given two integers N,C and two integer sequences a and b of length N. The sequen ...

  3. 通过python的selenium实现网站自动登陆留言

    from selenium import webdriver import time driver = webdriver.Chrome() driver.get('https://wordpress ...

  4. c# 爬虫和组件HtmlAgilityPack处理html

    测试当前爬虫的User-Agent:http://www.whatismyuseragent.net/ 大佬的博客地址:https://www.cnblogs.com/jjg0519/p/670274 ...

  5. 感兴趣的WebGL ,来自微博的一个全景星空图~

    https://m.weibo.cn/z/panorama?oid=1042143:ee51daffe7e7f497069af8c74840bbc2 还有一些好玩的相关链接 http://webgls ...

  6. kubernetes 集群内部访问外部的数据库endpoint

    k8s访问集群外独立的服务最好的方式是采用Endpoint方式,以mysql服务为例: 创建mysql-service.yaml apiVersion: v1 kind: Service metada ...

  7. Windows 查看端口使用、根据pid查找引用程序

    1.查看特定端口的使用情况:以80端口为例,输入命令 netstat -aon|findstr "80" 2.根据PID号找到对应的程序:以PID是6776为例,输入命令taskl ...

  8. vscode 显示 Module 'turtle' has no … member

    初次运行与 turtle 相关的 Python 代码时,vscode 上显示 Module 'turtle' has no - member. 这时,我们可以在 vscode 的设置里添加如下代码: ...

  9. excel中的更新链接

    表格每次打开都提示是否更新连接 在 [  数据 -->   编辑链接  ]  中也看到了这个连接 学着网上说的查找方式,去查找路径中包含的文字,文件名中包含的名字,都定位不到这个用了链接的单元格 ...

  10. SpringBoot之Redis访问(spring-boot-starter-data-redis)

    依赖注入: <!--dependency for redis--> <!-- https://mvnrepository.com/artifact/org.springframewo ...