javascript获取元素离文档各边距离的方法


Posted in Javascript onFebruary 13, 2015

本文实例讲述了javascript获取元素离文档各边距离的方法。分享给大家供大家参考。具体实现方法如下:

function getDistance(obj) {  

 if (!obj instanceof jQuery) {  

     obj = $(obj);  

 }  

 var distance = {};  

 distance.top = (obj.offset().top - $(document).scrollTop());  

 distance.bottom = ($(window).height() - distance.top - obj.outerHeight());  

 distance.left = (obj.offset().left - $(document).scrollLeft());  

 distance.right = ($(window).width() - distance.left - obj.outerWidth());  

 return distance;  

}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
iview中Select 选择器多选校验方法
Mar 15 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 #Javascript
Js控制滑轮左右滑动实例
Feb 13 #Javascript
JavaScript函数作用域链分析
Feb 13 #Javascript
JavaScript匿名函数用法分析
Feb 13 #Javascript
js实现进度条的方法
Feb 13 #Javascript
动态加载js的方法汇总
Feb 13 #Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 #Javascript
You might like
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python3实现多线程聊天室
2018/12/12 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
AJAX的全称是什么
2012/11/06 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
消防安全检查制度
2014/02/04 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
python文件名批量重命名脚本实例代码
2021/04/22 Python
golang import自定义包方式
2021/04/29 Golang
vue组件vue-esign实现电子签名
2022/04/21 Vue.js