以前看视频学习听到这个offset（）感觉很陌生，没有用过，马上记到笔记里了，今天翻起笔记再次看到，都已经忘记是怎么用的了，所以来到这里狠狠的记下来：

offset() 方法返回得或设置元素相对于文档的偏移（位置）。一般情况下有两个值：top和left值，经测试，不管所选的元素在哪偏移都是从整个文档开始算的

粘贴下面的代码，看效果

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">

    <title>测试偏移是从哪开始的</title>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>

    <style type="text/css">

        .box1{height: 300px;}

        .box2{padding: 10px;border: 1px solid #ddd;}

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2">

    <p>代码征服世界 本段文字偏移left<span></span>,top<strong></strong></p>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        var x=$("p").offset();

        $("span").text(x.left);

        $("strong").text(x.top);

    });

</script>

</body>

</html>

欢迎加入web前端交流开发群：qq 143206839

offset() 方法 文档偏移量的更多相关文章

  1. 26 JavaScript HTML DOM简介&方法&文档

    HTML DOM: Document  Object  Model 文档对象模型.是HTML的标准对象模型和编程接口.(JavaScript只是可以操作HTML DOM的语言之一) 定义了HTML元素 ...

  2. C#用Open与Add方法打开word文档的区别

    C#打开word文档常用有两种方法:Add与Open. Microsoft.Office.Interop.Word._Document doc = (Document)appWord.Document ...

  3. EasyUI文档学习心得

    概述 jQuery EasyUI 是一组基于jQuery 的UI 插件集合,它可以让开发者在几乎完全不需要CSS以及复杂的JS代码情况下完成美观且功能强大的Web界面. 本文主要说明一些如何利用Eas ...

  4. Jsoup库 解析DOM文档

    DOM文档包括 HTML, XML等等 下载: http://jsoup.org/download Jsoup 获取数据的方式 //html 文本, url, 本地html String html = ...

  5. mongodb安装,库操作,集合操作(表),文档操作(记录)

    安装 1.下载地址 https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-ssl-4.0.8-signed.msi 2.如果报没 ...

  6. [转载]JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

    在ajax中经常需要对元素的位置进行精确的定位,此时不仅需要获取元素自身的大小位置等属性.还需要知道页面.浏览器.滚动条等的长度和宽度.因为浏览器的兼容问题,如果使用javascript获取这些数值是 ...

  7. sphinx 源码阅读之分词，压缩索引，倒排——单词对应的文档ID列表本质和lucene无异 也是外部排序再压缩 解压的时候需要全部扫描doc_ids列表偏移量相加获得最终的文档ID

    转自:http://github.tiankonguse.com/blog/2014/12/03/sphinx-token-inverted-sort.html 外部排序 现在我们的背景是有16个已经 ...

  8. 高效查看MySQL帮助文档的方法

    在mysql的使用过程中, 可能经常会遇到以下问题: 某个操作语法忘记了, 如何快速查找? 如何快速知道当前版本上某个字段类型的取值范围? 当前版本都支持哪些函数?希望有例子说明.. 当前版本是否支持 ...

  9. 一个简单的解决方法：word文档打不开，错误提示mso.dll模块错误。

    最近电脑Word无故出现故障,无法打开,提示错误信息如下: 问题事件名称: APPCRASH应用程序名: WINWORD.EXE应用程序版本: 11.0.8328.0应用程序时间戳: 4c717ed1 ...

随机推荐

  1. 宏、预编译（day12）

    指针数组里的每个存储区是一个指针类型 的存储区 字符指针数组里包含多个字符类型指针,其中 每个指针可以表示一个字符串 字符指针数组可以用来表示多个相关字符串 主函数的第二个参数是一个字符指针数组, 其 ...

  2. linux -- 扩容 /home 空间( xfs文件系统分区扩容指定挂载点)

    问题: /home空间容量不够使用,扩容卷组,扩容挂载点 方法: 1. 确认有可用的物理磁盘 fdisk -l -- 查看磁盘信息 df -h -- 查看当前挂载信息 vgs -- 查看当前卷组信息 ...

  3. 将项目上传到Github之使用git命令上传

    1,先从GitHub网页上建立一个数据仓库 2,安装git 下载地址:https://www.git-scm.com/download/win 3,找到本地要上传的项目目录,右键点击Git Bash ...

  4. python第十周：进程、协程、IO多路复用

    多进程(multiprocessing): 多进程的使用 multiprocessing是一个使用类似于线程模块的API支持产生进程的包. 多处理包提供本地和远程并发,通过使用子进程而不是线程有效地侧 ...

  5. 洛谷 P1131 BZOJ 1060 [ZJOI2007]时态同步

    题目描述 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板的任何两个节点 ...

  6. 自建X509证书

    X509证书是需要买的,自己建的证书不会被浏览器认可,会弹出提示安全不受保障的页面. 学习一下如何建,实际用到还是要买. 打开vs2015开发员人员命令提示 输入创建证书的命令 Makecert.ex ...

  7. SpringBoot支持AJAX跨域请求

    利用注解的方式解决AJAX请求跨域问题 1.编写一个支持跨域请求的 Configuration - 第一种方式 - CorsConfig.java import org.springframework ...

  8. java内存结构(执行时数据区域)

    java虚拟机规范规定的java虚拟机内存事实上就是java虚拟机执行时数据区,其架构例如以下: 当中方法区和堆是由全部线程共享的数据区. Java虚拟机栈.本地方法栈和程序计数器是线程隔离的数据区. ...

  9. js使用总结

    1.周期性运行函数 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 举例: <input type="button" value="開始计 ...

  10. 判断是否是pc，获取屏幕宽度

    $(function(){ var w=document.documentElement?document.documentElement.clientWidth:document.body.clie ...