`
yimeng500
  • 浏览: 54679 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

取得多层嵌套div的绝对位置

阅读更多
有时嵌套多层div时,可能由于设置了内层div的top和left是相对与外层div来说的,所以有时计算内部的div到body的边的距离会出现错误,此时,只需要循环div的外层的多个父节点,累加就能得到最终的结果,函数如下.
function absPos(node){
		var x=y=0;
		do	{
			x+=node.offsetLeft;
			y+=node.offsetTop;
		}
		while(node=node.offsetParent);
		return {
			'x':x,
			'y':y
		};		
	}
分享到:
评论

相关推荐

    JS获取元素多层嵌套思路详解

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案...元素多层嵌套,JS获取问题</title> </head> <body> <div id=box> <span>span <div> <span>span <span>1 </div> <div> <spa

    【JavaScript源代码】element table多层嵌套显示的实践.docx

    在本案例中,我们探讨的是如何使用Element UI的`el-table`组件实现多层嵌套显示的功能,这对于处理复杂的数据展示场景尤其有用。下面我们将深入解析这个实践中的关键点。 1. **多层嵌套的表格结构**: 在描述中...

    多层tab标签嵌套支持无连接分类

    3. **JavaScript / jQuery 控制**:动态切换Tab内容通常需要JavaScript来实现,尤其是涉及到多层嵌套时。这包括监听Tab点击事件、隐藏/显示相应内容区域、处理无链接Tab的行为等。如果是使用jQuery库,可以利用`....

    vue elementUI 表单校验功能之数组多层嵌套

    然而,在处理复杂的数据结构,特别是涉及到数组和多层嵌套时,表单校验可能会变得相当棘手。本篇文章将详细介绍如何在Vue Element UI中进行数组多层嵌套的表单校验。 当数据结构包含数组,并且数组内的对象也需要...

    DIV多层嵌套margin-top的BUG问题

    本文主要探讨一个常见的前端开发问题,即“DIV多层嵌套margin-top的BUG问题”。在某些浏览器,特别是Firefox和Internet Explorer的不同版本中,这个问题可能导致预期的样式效果出现偏差。 问题起源于浏览器对于CSS...

    VUE多层路由嵌套实现代码

    VUE多层路由嵌套实现代码 VUE多层路由嵌套是一种复杂的路由机制,能够满足复杂的应用场景需求。该实现代码主要是通过定义多个模板和路由对象,然后将其组合起来实现多层路由嵌套。 1. 定义模板 首先,我们需要...

    GridView多层嵌套和折叠与展开(修改适合自己使用)

    GridView控件在Web开发中常用于数据展示,尤其在数据层级结构复杂时,多层嵌套的GridView可以清晰地呈现数据关系。本文将探讨如何实现GridView的多层嵌套以及折叠与展开的功能。 首先,GridView的多层嵌套通常通过...

    iframe 多层嵌套 无限嵌套 高度自适应的解决方案

    然而,当`iframe`进行多层嵌套时,特别是无限嵌套,如何保证每个`iframe`的高度都能自适应其内容,避免滚动条的出现,就成为了一个挑战。本文将探讨一种解决方案,适用于`A`、`B`、`C`三个页面互相嵌套的情况。 ...

    让div圆角显示

    2. **顶部和底部圆角**:`.rtop` 和 `.rbottom` 定义了顶部和底部圆角的基本框架,其中包含多层嵌套的`<div>`元素,每个子`<div>`都代表一个圆角部分。 3. **圆角实现**: - `.r1` 至 `.r4` 分别设置了不同的左右...

    基于vue v-for 多层循环嵌套获取行数的方法

    特别是在涉及到多层嵌套数据结构的场景中,经常需要对当前循环的行数进行跟踪。本文将详细探讨在Vue中通过v-for实现多层循环嵌套时如何获取行数的方法。 ### 知识点一:v-for指令基础 v-for指令是Vue模板语法中...

    JavaScript实现多层颜色选项卡嵌套

    JavaScript实现多层颜色选项卡嵌套是一个常见的网页交互设计,常用于展示多个相关但内容不同的模块。在这个场景中,我们看到HTML结构包含了两层选项卡:第一层是左侧的`#leftBox`列表,第二层是右侧的`#rightBox`内...

    js tab 嵌套

    每个选项卡是一个链接或按钮,每个内容区域是一个段落或者div元素。通常会使用类名来标识当前选中的选项卡和显示的内容。 2. **CSS 样式**:使用CSS定义选项卡和内容区域的默认样式,如隐藏非活动内容区域,以及...

    DIV+CSS多级下拉菜单示例

    1. **嵌套结构**:为了实现多级,我们需要在HTML中使用嵌套的`<div>`,每个层级对应一个菜单级别。 2. **宽度和高度**:根据需要设置菜单项的宽高,以及下拉菜单的宽度和展开高度。 3. **过渡效果**:通过CSS的`...

    div被iframe遮住的几种情况及解决方法

    在前端开发过程中,DIV元素被IFRAME遮挡是一个常见的问题,尤其是当页面布局复杂或存在多层嵌套的元素时。以下将详细阐述几种DIV被IFRAME遮挡的情况,并提供相应的解决方法。 首先,要了解的是IFRAME是一种HTML元素...

    DIV+CSS网页制作对搜索引擎优化的优势分析整理.pdf

    我的几项实验结果没有完全出来,但根据目前掌握的情况来看, spider爬行 Table布局的页面,遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面。 3. 速度问题:DIV+CSS布局较 Table布局减少了页面代码,加载...

    UI的一些页面div+css

    例如,一个网页可能由头部、主体和底部等多个Div组成,每个Div内部又可以嵌套其他Div,形成多层嵌套的结构。 CSS(Cascading Style Sheets)则负责定义这些Div的样式,包括颜色、字体、边距、布局等。CSS的优势在于...

Global site tag (gtag.js) - Google Analytics