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

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


代码如下:

// 找到子元素在父元素中的相对位置
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 的属性来定位到子元素的位置

赞 (0)

相关推荐

  • Js中parentNode,parentElement,childNodes,children之间的区别

    parentElement 获取对象层次中的父对象.  parentNode 获取文档层次中的父对象.  childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合.  children 获取作为对象直接后代的 DHTML 对象的集合. -------------------------------------------------------- parentNode和parentElement功能一样,childNodes和children功能一样.但是

  • js判断一个元素是否为另一个元素的子元素的代码

    当然方法有很多,不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一. 废话少说直接上方法: 复制代码 代码如下: function isParent (obj,parentObj){ while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){ if (obj == parentObj){ return true; } obj = obj.parentN

  • javascript中parentNode,childNodes,children的应用详解

    "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementBy

  • JS中用childNodes获取子元素换行会产生一个子元素

    JS中用childNodes获取子元素换行会产生一个子元素 <div id='div1'> <div id='div2'> <div id='div3'></div> </div> <div class='div2'> </div> </div> 这样的代码 $('#div1').childNodes.length==>会等于 5哦 要是你把这些代码不换行你就会得到2 $('#div1').childNo

  • js遍历子节点子元素附属性及方法

    复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod

  • js与jquery获取父元素,删除子元素的两种不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id");得到的是jquery对象,对该对象进行操作的时候使用jquery方法 1.对于上面获得的对象进行遍历 (1).js方法  for(vat i=0;j<obj.length;i++){ obj[i] 来获得对应的某一个元素} (2).jquery方法  $("#id").each

  • JavaScript操作DOM元素的childNodes和children区别

    对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对children和childNodes在chrome环境下的测试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</

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

    经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')

  • JavaScript中关于for循环删除数组元素内容时出现的问题

    JavaScript中关于for循环删除数组元素内容时出现的问题

    昨天用for循环进行数组去重的时候出现的问题, 首先,用双重for循环把前一个和所有后面的元素进行比较,如果相等则删除. 但是,如果数组里面有三个以上连续相等的元素的时候,就会出现问题. var arr = [1,1,1,2,2]; for(var i=0; i<arr.length-1; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i] === arr[j]){ arr.splice(j,1); } } } document.write(&

  • 高效的获取当前元素是父元素的第几个子元素

    例如处理事件的时候,有时候需要知道当前点击的是第几个子节点,而HTML DOM本身并没有直接提供相应的属性,需要自己来计算. 从一个索引序号,很容易得到该索引对应的子节点或者子元素,直接用parentNode.childNodes[index] 或 parentNode.children[index] 就行. 但反过来,已知一个节点或元素对象,要知道它的索引序号则没有那么直接了. 一些特殊的元素,HTML DOM有对应的属性表示其索引序号,主要是表格的TD 和 TR 元素. 表格单元格TD元素有

  • JavaScript中的子窗口与父窗口的互相调用问题

    注意:要用open打开才行,如果用openModal打开则会访问不到opener. open的参数: window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no') 参数说明 'page.html' 弹出窗口的文件名; 'newwindow' 弹出的新窗口的名字,非必须,可用

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

  • Vue中通过属性绑定为元素绑定style行内样式的实例代码

    1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h

  • vue中实现子组件接收父组件方法并获取返回值

    目录 子组件接收父组件方法并获取返回值 父组件 GetCallback.vue 子组件 CallbackChild1.vue 子组件接收父组件的另一种方法 子组件接收父组件方法并获取返回值 项目中有时候会遇到父子组件传值的问题,比如子组件需要接收父组件方法并获取该方法返回值的时候. 使用this.$emit('方法名', '参数1', '参数2')的方式,获取到不是父组件方法的return值.但是我们可以将参数改为回调函数的形式,父组件里执行该回调函数,返回值后给子组件,子组件再接收返回值. 示

  • js 阻止子元素响应父元素的onmouseout事件具体实现

    复制代码 代码如下: $(".target-menu").mouseout(function(e){ evt = window.event || e; var obj = evt.toElement || evt.relatedTarget; var pa = this; if(pa.contains(obj)) return false; $(this).hide(); });

  • 阻止子元素继承父元素事件具体思路及实现

    复制代码 代码如下: <div id="p_box" onclick="a()"> <div id=p_cont> </div> </div> #p_box包括#p_cont,当点击#p_box区域任何位置时(包括#p_cont),都会触发a事件.想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码. 变成 复制代码 代码如下: <div id="p_box&qu

  • Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码

    /** * @author hechen */ var gs = { /**获得屏幕宽度**/ ScreenWidth: function () { return window.screen.width; }, /***获得屏幕高度**/ ScreenHeight: function () { return window.screen.height; }, /**获得浏览器***/ Browse: function () { var browser = {}; var userAgent = n

随机推荐