`
y1d2y3xyz
  • 浏览: 256643 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS获取页面中节点的位置

XHTMLHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取DOM节点位置</title>
<script type="text/javascript">
function pageX(elem) {//获取元素相对于整个文档的X位置的函数；
    var p = 0;
    while ( elem.offsetParent ) {
        p += elem.offsetLeft;
        elem = elem.offsetParent;
    }
    return p;
}
function pageY(elem){ //获取元素相对于整个文档的Y位置的函数；
    var p = 0;
    while ( elem.offsetParent ) {
        p += elem.offsetTop;
        elem = elem.offsetParent;
    }
    return p;
}
function getPos(id){
	var o = document.getElementById(id);
	var x = pageX(o);
	var y = pageY(o);
	alert("x:"+x+",y:"+y);
}
</script>
</head>
<body>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><input type="button" id="bt" onclick="getPos('bt')" value="获取节点位置" /></td>
  </tr>
</table>
</body>
</html>
分享到：
| extjs源码分析-016(Ext....)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript获取指定节点父节点、子节点的方法

    5. parentObj.getElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。 通过临近节点获取 1. neighbourNode.previousSibling：获取已知节点（neighbourNode）...

    js获取HTML DOM节点详解

    在 Web 应用程序尤其是 Web 2.0 程序的开发过程中，频繁地需要获取页面中的某个元素，并对其样式、内容等进行更新。如何有效地获取需要更新的元素是实现这些功能的前提。幸运的是，在 JavaScript 中有多种方法可以...

    js获取treeview点击节点的值

    详细介绍了js获取asp.net treeview 控件点击节点的值。点击treeview节点不提交网页

    JavaScript获取HTML DOM节点元素的方法的总结

    JavaScript获取HTML DOM节点元素的方法是Web开发中的基础技能，尤其是在动态更新页面内容时。本文将对几种常见的DOM操作方法进行详细解释。 首先，我们可以通过顶层的`document`对象来获取元素： 1. `document....

    javascript获取网页中指定节点的父节点、子节点的方法小结.docx

    - **定义**: 获取指定父节点的所有子节点中类型为指定值的子节点数组。 - **特点**: 与 `document.getElementsByTagName()` 类似，但仅限于指定父节点下的子节点。 - **示例代码**: ```javascript const ...

    JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容

    在JavaScript编程中，文本框（TextBox）是网页交互中常用的一种元素，用户可以在其中输入文本。有时，开发者需要获取或操作文本框中的焦点光标位置、选中起始位置、终止位置以及选中的内容，这对于实现诸如高亮显示...

    javascript获取指定节点父节点、子节点的方法.pdf

    本文主要介绍如何使用JavaScript获取指定节点的父节点、子节点以及相邻节点的方法。 首先，我们可以从`document`节点开始获取元素。`document.getElementById()`是最常用的方法，通过元素的ID来精确获取元素。但...

    JavaScript实现获取dom中class的方法

    以上就是通过JavaScript获取DOM中class元素的方法和相关知识点的介绍。这涉及到对DOM操作的理解和对特定方法的应用，对于前端开发者来说是一项基础且重要的技能。掌握了这些知识点，开发者可以更加灵活地处理页面...

    js获取页面文字的例子

    总结来说，JavaScript获取页面文字主要通过DOM接口，如`getElementById`、`getElementsByClassName`、`querySelectorAll`，以及使用`textContent`或`innerText`属性。在处理复杂情况时，可能需要编写递归函数来遍历...

    js获取节点方法1

    本文将详细介绍几种常见的JavaScript获取节点的方法，并探讨如何读写属性节点。 首先，我们关注的是通过不同的方式来获取元素节点： 1. **通过ID获取元素**：这是最直接的方法，`getElementById()`函数接受一个...

    js中获取 table节点各tr及td的内容简单实例

    在JavaScript中获取table节点各tr（表格行）及td（表格单元格）的内容是一个常见的操作，这在进行网页动态内容更新或数据提取时非常有用。本文将通过实例来说明如何通过JavaScript代码实现这一功能。 首先，我们...

    javascript获取网页中指定节点的父节点、子节点的方法小结

    我们在实际的开发当中经常要获取页面中某个html元素，动态的更新该元素的样式、内容属性等。 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种，下面是总结的一些方法. 1. 通过document节点...

    js实现获取列表中某个（些）节点所有子节点和直系父节点数据

    在JavaScript编程中，遍历和操作DOM节点是常见的任务，特别是在构建动态网页和交互式应用时。本主题探讨的是如何高效地实现一个功能，即获取列表中特定节点的所有子节点和直系父节点数据。这一过程涉及到递归、循环...

    AjaxTree源码，AJAX动态获取节点的子节点

    AjaxTree是一款基于AJAX技术实现的树形视图控件，其核心特性在于能够动态地通过服务器请求获取节点的子节点数据，从而避免一次性加载大量数据导致页面性能下降的问题。这一设计模式在网页应用中非常常见，尤其是在...

    遍历网页中的节点 js+html

    在实际应用中，遍历网页节点常用于实现如查找特定内容、动态修改页面元素、提取数据等多种功能。了解并熟练掌握这些方法，将使你在网页开发中游刃有余。 例如，如果你有一个HTML文档，你需要找到所有的链接（`&lt;a&gt;`...

    javascript 节点

    - **删除节点**：可以通过`removeChild()`方法从父节点中删除一个子节点。 ##### 示例代码： ```javascript // 创建一个新元素节点 var newElement = document.createElement("p"); // 创建文本节点 var newText = ...

    JS获取网页中HTML元素的几种方法分析

    ### JS 获取网页中 HTML 元素的几种方法分析 在 Web 开发中，JavaScript 是一种常用的客户端脚本语言，能够动态地控制网页的行为与样式。本文将深入探讨 JavaScript 获取网页中 HTML 元素的多种方法及其应用场景。 ...

    JS_操作节点.doc

    19. **preserveWhiteSpace**：可读写属性，决定是否保留文本节点中的空白字符。 20. **previousSibling**：只读属性，返回当前节点的前一个兄弟节点。 21. **Text**：返回节点及其后代的文本内容，用于合并所有...

    练习2：访问当当购物车页面节点

    例如，如果购物车页面有一个特定的ID为"cart-items"的`&lt;div&gt;`元素，我们可以使用JavaScript的`document.getElementById()`方法获取这个节点： ```javascript var cartDiv = document.getElementById('cart-items');...

Magicbox
Global site tag (gtag.js) - Google Analytics