function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

通过javascript获取元素position的更多相关文章

  1. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  2. JavaScript获取元素样式

    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...

  3. javascript 获取元素样式的方法

    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...

  4. JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + " ...

  5. javascript获取元素的计算样式

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  6. JavaScript获取元素尺寸和大小操作总结(转载)

    一.获取元素的行内样式 var obj = document.getElementById("test"); alert(obj.height + "\n" + ...

  7. javascript获取元素样式值

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  8. javascript获取元素的方法[xyyit]

    1. javascript默认的方法: <div id=”div_id” class=”div_class” name=”div_name”></div> //1. 根据id ...

  9. JavaScript获取元素CSS计算后的样式

    原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...

随机推荐

  1. 【PAT】1005. 继续(3n+1)猜想 (25)

    1005. 继续(3n+1)猜想 (25) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中 ...

  2. mysql打印输出转csv格式

    1. mysql打印输出放在input.csv中 2. 执行该文件 <?php $str = file_get_contents("./input.csv"); $str = ...

  3. thinkphp5.0Traits引入

    ThinkPHP 5.0开始采用trait功能(PHP5.4+)来作为一种扩展机制,可以方便的实现一个类库的多继承问题. Traits 是一种为类似 PHP 的单继承语言而准备的代码复用机制.Trai ...

  4. 转:php防止sql注入的一点心得

    转:http://blog.csdn.net/sky_zhe/article/details/9702489 转:http://zhangxugg-163-com.iteye.com/blog/183 ...

  5. 20169211《Linux内核原理与分析》第四周作业

    20169211<Linux内核原理与分析>第四周作业内容列表 1.教材第3.5章节知识学习总结: 2.实验楼配套实验二实验报告: 1.<linux内核设计与实现>教材第3.5 ...

  6. 长沙理工大学第十二届ACM大赛-重现赛 K - 大家一起来数二叉树吧

    题目描述 某一天,Zzq正在上数据结构课.老师在讲台上面讲着二叉树,zzq在下面发着呆. 突然zzq想到一个问题:对于一个n个节点,m个叶子的二叉树,有多少种形态呐?你能告诉他吗? 对于第一组样例的解 ...

  7. Arduino可穿戴教程之第一个程序——连接硬件选择板子(二)

    Arduino可穿戴教程之第一个程序——连接硬件选择板子(二) 2.4.2  连接硬件 在选择好示例程序后就可以将LilyPad通过LilyPad编程器连接到电脑了. 2.4.3  选择板子 如果你了 ...

  8. nyoj 737 石子合并 http://blog.csdn.net/wangdan11111/article/details/45032519

    http://blog.csdn.net/wangdan11111/article/details/45032519 http://acm.nyist.net/JudgeOnline/problem. ...

  9. JavaScript初步

    隐式转换 其他类型转换成布尔类型: undefined --> false null --> false 0或者0.0或者NaN --> false 字符串长度为0 --> f ...

  10. Scrapy实战篇(四)之周杰伦到底唱了啥

    从小到大,一直很喜欢听周杰伦唱的歌,可是相信很多人和我一样,并不能完全听明白歌词究竟是什么,今天我们就来研究一下周董最喜欢在歌词中用的词,这一小节的构思是这样的,我们爬取周杰伦的歌词信息,并且将其进行 ...