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 相关文章推荐
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
分享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获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
Yii2单元测试用法示例
2016/11/12 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
JS异步函数队列功能实例分析
2017/11/28 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
Python splitlines使用技巧
2008/09/06 Python
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python发送邮件实例分享
2017/07/28 Python
使用python实现BLAST
2018/02/12 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
大学生标准自荐书
2014/06/15 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android