Javascript中找到子元素在父元素内相对位置的代码


Posted in Javascript onJuly 21, 2012

经过自己一晚上尝试,貌似找到了一个方法。
现在脑袋还糊涂,先记下来,以后再分析。

// 找到子元素在父元素中的相对位置 
function getElementTop(element){ 
var el = (typeof element == "string") ? document.getElementById(element) : element; 
if (el.parentNode === null || el.style.display == 'none') { 
return false; 
} 
return el.offsetTop - el.parentNode.offsetTop; 
}

这个函数可以获取子元素在父元素中的相对高度,可以通过设置父元素的 scrollTop 的属性来定位到子元素的位置
Javascript 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 #Javascript
基于jquery的可多选的下拉列表框
Jul 20 #Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 #Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 #Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 #Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 #Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 #Javascript
You might like
完美的php分页类
2017/10/24 PHP
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
快速了解Python相对导入
2018/01/12 Python
详解python分布式进程
2018/10/08 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
语文教育专业应届生求职信
2013/11/23 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
给校长的一封建议书
2014/03/12 职场文书
寄语学生的话
2014/04/10 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL