`
zhaoyu2288
  • 浏览: 40065 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS获得HTML元素位置

阅读更多
//获得元素位置
	function getAbsolutePosition(obj) {
        	position = new Object();
        	position.x = 0;
        	position.y = 0;
        	position.h = 0;
        	position.w = 0;
        	var tempobj = obj;
        	if (tempobj.offsetHeight + '' != 'undefined') { position.h = tempobj.offsetHeight; }
        	if (tempobj.offsetWidth + '' != 'undefined') { position.w = tempobj.offsetWidth; }
        	while (tempobj != null && tempobj != document.body) {
        	    position.x += tempobj.offsetLeft + tempobj.clientLeft;
         	   position.y += tempobj.offsetTop + tempobj.clientTop;
        	    tempobj = tempobj.offsetParent
       		}
        	return position;
   	}

//使用
var ask = getAbsolutePosition(xxx);
alert(ask.x);   //横坐标
alert(ask.y);   //纵坐标
alert(ask.h);   //高
alert(ask.w);   //宽
分享到:
评论

相关推荐

    js无限极跨越框架获得html元素的位置(源码)

    6. `selectUser.js`: 主要的JavaScript源码,实现了跨框架获取元素位置的功能。 在`selectUser.js`中,开发者可能使用了递归方法来遍历所有框架,查找目标元素并计算其位置。递归的关键在于,每次进入一个iframe,...

    JS可将任何HTML元素吸附到鼠标上的动画特效源码.zip

    标题中的“JS可将任何HTML元素吸附到鼠标上的动画特效源码”指的是使用JavaScript编程语言实现的一种交互式网页效果。这种效果允许用户在移动鼠标时,某个HTML元素会跟随鼠标的移动而移动,从而创造出吸附在鼠标上的...

    Foundation HTML5 Animation with JavaScript

    通过DOM(Document Object Model)接口,JavaScript可以动态修改HTML元素的属性,如位置、大小、颜色等,从而实现动画效果。例如,使用requestAnimationFrame()方法代替传统的setTimeout()或setInterval(),可以更...

    javascript拖拽图片到指定位置

    在HTML5中,这个功能得到了原生支持,因此我们可以利用JavaScript和jQuery的API来实现这一特性。 1. **HTML结构**: 在HTML中,我们需要至少两个元素:一个用于展示图片,另一个作为目标区域。例如: ```html ...

    HTML5/JavaScript 图像边缘羽化

    HTML5/JavaScript 图像边缘羽化是Web开发中一种高级图像处理技术,它允许开发者在网页上实现图像的柔和过渡效果,通常用于增加图像的视觉吸引力或者使图像与其他元素融合得更加自然。这一技术主要基于HTML5的Canvas ...

    jfMagnify-可以放大任何HTML元素的jQuery放大镜插件

    jfMagnify是一款强大的HTML元素放大工具,它基于流行的JavaScript库jQuery构建。这款插件的出现,使得开发者能够轻松地为网页中的任何元素添加放大功能,不仅限于图片,还包括超链接、文本、按钮等。这种功能在电商...

    JavaScript完全自学宝典 源代码

    2.1.html JavaScript中this在不同位置指向的对象。 2.2.html null类型的简单应用。 2.3.html 算术运算符用法。 2.4.html 逻辑运算符使用方法。 2.5.html 位运算符使用方法。 2.6.html 赋值...

    [HTML5资料]Canvas教程,通过脚本(通常是JavaScript)绘图的HTML元素

    虽然`<canvas>`元素可以像其他HTML元素一样应用CSS样式(如边距、边框、背景等),但这些样式并不会影响到在画布上实际绘制的内容。也就是说,即使设置了边框样式,画布内部的绘制内容仍然不会被边框所包围。如果未...

    Javascript 获取光标位置

    总的来说,JavaScript获取光标位置是通过访问`input`元素的`selectionStart`和`selectionEnd`属性或使用`window.getSelection()`来实现的。在实际开发中,结合jQuery等库,可以更方便地处理这类需求。对于提供的...

    JS拖拽DIV后保存位置示例

    本示例“JS拖拽DIV后保存位置”是关于如何使用JavaScript实现用户可以拖动HTML中的元素,并在拖动后保存其位置。通达OA(Tongda Office Automation)是一款企业级协同办公软件,此实例可能是为通达OA的自定义工作...

    JS获得鼠标位置(兼容多浏览器ie,firefox)

    页面坐标是指鼠标相对于整个网页左上角的位置,而元素坐标则是相对于某个特定HTML元素左上角的位置。 在JavaScript中,`event`对象提供了获取鼠标位置的方法。当鼠标移动时,可以通过监听`mousemove`事件来获取坐标...

    html+css+javascript 实现小游戏 2048

    每当棋盘状态变化时,都需要更新对应的HTML元素,如数字方块的文本和分数显示。可以使用`innerHTML`属性或`textContent`属性来修改元素内容。 总结,实现2048小游戏涉及了HTML、CSS和JavaScript的基本使用和高级...

    js获得对象的x,y位置函数

    `offsetLeft`和`offsetTop`是HTML元素的非标准但广泛支持的属性,用于获取元素相对于其offsetParent元素的左偏移和顶偏移。这里的`offsetParent`通常是指最近的带有定位(position)属性(除了static)的祖先元素。...

    仿Google页面效果完美版源码(HTML+JavaScript).zip

    在仿Google页面的源码中,我们可以期待看到HTML元素如`<header>`,`<nav>`,`<main>`,`<footer>`等,用于构建页面的基本布局。此外,HTML5引入了一些新特性,如`<section>`,`<article>`,这些可能也被用到了,以...

    html+css+js表白源码.rar

    CSS(Cascading Style Sheets)则是用于美化HTML元素的工具,它决定了网页的视觉呈现,如颜色、字体、布局和动画效果。在这个表白代码中,CSS可能会被用来设计出吸引人的背景,动态变化的字体颜色,或者当鼠标悬停或...

    单文件HTML本地引入elementUI

    在HTML文件的`<body>`标签的底部(通常在`</body>`之前),引入`lib/js`目录下的`element-ui.js`或`element-ui.min.js`,并确保已经引入了JavaScript运行环境,比如ECMAScript 5或以上版本: ```html ...

    jQuery 实现DOM元素拖拽交换位置的实例代码

    在代码中,会涉及到如何获取元素索引、如何存储和更新元素位置、如何触发 DOM 的重新渲染等操作。 #### 5. 最佳实践和注意事项 最佳实践包括代码的模块化、事件的合理解绑、性能优化(减少 DOM 操作、使用事件委托...

    HTML5 and JavaScript Projects.pdf

    ### HTML5与JavaScript项目知识点概览 #### 一、HTML5与JavaScript项目介绍 - **HTML5**: HTML5 是超文本标记语言的最新版本,它引入了许多新的特性,包括更丰富的多媒体支持、改进的离线存储功能以及更好的文档...

    HTML、XHTML、CSS与JavaScript经典结合

    开发者可以通过CSS选择器来指定哪些HTML元素应用哪些样式规则,从而实现字体颜色、背景、边距、定位等样式的定制。JavaScript则是一种脚本语言,能够添加交云性和动态内容到网页中。JavaScript通常用于表单验证、...

    jQPage(动态解析数组获得页面元素)

    - 根据模板创建一个新的HTML元素。 - 使用`$.extend()`或直接对象赋值将数组元素的属性插入到模板元素中。 - 使用`.html()`或`.append()`方法将新创建的元素添加到页面的适当位置。 4. **事件绑定**:如果需要,...

Global site tag (gtag.js) - Google Analytics