JavaScript获取网页元素的绝对坐标
我的图书馆
JavaScript获取网页元素的绝对坐标
&script language="javascript"&function findPosX(obj) {var curleft = 0;if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回body&& while (obj.offsetParent) {//遍历所有父类元素&&& curleft += obj.offsetL//当前元素的左边距&&& obj = obj.offsetP&&&&&&& && }} else if (obj.x) curleft += obj.x;}
function findPosY(obj) {var curtop = 0;if (obj.offsetParent) {&& while (obj.offsetParent) {
&&& curtop += obj.offsetT&&& obj = obj.offsetP&& }} else if (obj.y) curtop += obj.y;}function getPos(){return {x:findPosX(document.getElementById("p36table")),y:findPosY(document.getElementById("p36table"))};}
function showPos(){var pos = getPos();alert("x=="+pos.x+"y=="+pos.y);}&/script&
&div id="parentdiv" style="position: border:5" &&&&&&&&& &table id="p36table" style="position: " width="185" border="1" align="center" cellpadding="0" cellspacing="0"&&& &tr&&& &td&&&&&& &&& &iframe frameborder=0 scrolling=no width="185" height="170" marginHeight=0 marginWidth=0 align="left" &&&&& src='#'&&/iframe&&& &/td&&& &td onClick="javascript:showPos();"&测试获得坐标&/td&&& &/tr&&&&&& &/table&&& && &/div&&& &/html&
function&& getAbsPoint(e)&& {&& &&& var&& x&& =&& e.offsetLeft,&& y&& =&& e.offsetT&& &&& while(e=e.offsetParent) &&& { &&&&&& x&& +=&& e.offsetL&& &&&&&& y&& +=&& e.offsetT&&& } &&& alert("x:"+x+","+"y:"+y);&& }
function&& getAbsPoint(obj)&& {&& && var&& x,y;&& && orect&& =&& obj.getBoundingClientRect();&& x=oRect.left&& y=oRect.top&& alert("("+x+","+y+")")&& }
JS中获得窗口属性的方法 1。获得屏幕的分辨率： screen.width screen.height 2。获得窗口大小： document.body.clientWidth document.body.clientHeight 3。获得窗口大小（包含Border、Scroll等元素） document.body.offsetWidth document.body.offsetHeight&&
上一篇: 下一篇:
【您可能对以下 56 篇相关日志也感兴趣】[][1145][][1616][][656][][731][][853]
喜欢该文的人也喜欢javascript如何获取鼠标点击位置的坐标:当用鼠标点击一个元素的时候，有时候需要获得当前鼠标指针的坐标，本章节就简单介绍一下如何达成此目的。有时候我们需要的鼠标坐标的参照对象也是不同的，下面就分类介绍一下:一.相对于显示屏幕的坐标:可以使用screenX和screenY属性获取鼠标相对于屏幕左边缘和上边缘的距离，代码如下:
&!DOCTYPE html&
&meta charset=" utf-8"&
&meta name="author" content="http://www.softwhy.com/" /&
&title&蚂蚁部落&/title&
&style type="text/css"&
height:100
background-color:
margin:100
&script type="text/javascript"&
window.onload=function()
var odiv=document.getElementById("mydiv");
var ospan=document.getElementById("myspan");
odiv.onclick=function(ev)
ev=window.event||
ospan.innerHTML="x:"+ev.screenX+"y:"+ev.screenY;
&div id="mydiv"&&/div&
&span id="myspan"&&/span&
以上代码，当点击绿色的div时，就可以显示鼠标指针在屏幕中的坐标。
说明:这两个属性在所有主流浏览器中兼容性良好。二.获取相对于浏览器窗口的坐标:在更多时候我们想获取鼠标指针相对于浏览器窗口的坐标，使用clientX和clientY属性即可实现。代码实例如下:
&!DOCTYPE html&
&meta charset=" utf-8"&
&meta name="author" content="http://www.softwhy.com/" /&
&title&蚂蚁部落&/title&
&style type="text/css"&
height:100
background-color:
margin:100
&script type="text/javascript"&
window.onload=function()
var odiv=document.getElementById("mydiv");
var ospan=document.getElementById("myspan");
odiv.onclick=function(ev)
ev=window.event||
ospan.innerHTML="x:"+ev.clientX+"y:"+ev.clientY;
&div id="mydiv"&&/div&
&span id="myspan"&&/span&
以上代码，当点击绿色的div时，就可以显示鼠标指针在浏览器窗口中的坐标。
说明:这两个属性在所有主流浏览器中兼容性良好。附加介绍:clientX和clientY属性是获取的相对于浏览器的坐标，但是有时候我们想获取相对于body（这里的body就姑且相当于网页页面）的坐标，但是如果网页过长的话，就无法获得了，在火狐浏览器下可以使用pageX和pageY来实现，因为这两个属性已经考虑到这个因素，但是其他浏览器暂时不支持。不过可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft ，document.documentElement.scrollTop。代码实例如下:
&!DOCTYPE html&
&meta charset=" utf-8"&
&meta name="author" content="http://www.softwhy.com/" /&
&title&蚂蚁部落&/title&
&style type="text/css"&
height:100
background-color:
margin:100
&script type="text/javascript"&
window.onload=function()
var odiv=document.getElementById("mydiv");
var ospan=document.getElementById("myspan");
odiv.onclick=function(ev)
ev=window.event||
var scrollX = document.documentElement.scrollLeft || document.body.scrollL
var scrollY = document.documentElement.scrollTop || document.body.scrollT
var x = ev.pageX || ev.clientX + scrollX;
var y = ev.pageY || ev.clientY + scrollY;
ospan.innerHTML="x:"+x+"y:"+y;
&body style="height:1200"&
&div id="mydiv"&&/div&
&span id="myspan"&&/span&
以上代码可以获得鼠标指针相对于文档的坐标。
三.获取鼠标指针相对于某个元素的坐标:这里就不做介绍了，相关内容可以参阅一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8210
更多内容可以参阅:http://www.softwhy.com/javascript/
浏览: 47720 次
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'使用iframe调用指定网页的特定位置(显示目标网页某区域的我想要的内容)
分类,标签:
有些时候我们并不需要显示iframe标签属性src指定的目标网页的所有内容，往往只需要显示某一特定区域。现有两种实现方法提供，但严禁使用此方法用于欺骗、隐瞒目的。
& & & 这里用到了Iframe的一些属性，稍微介绍下：
& & & &1. marginheight 属性规定框架内容与框架的上方和下方之间的高度，以像素计。
& & & &2. maiginweidth 属性规定框架内容与框架的左侧和右侧之间的高度，以像素计。
& & & &3. vspace y方向显示的区域，负值为从目标网页最上面开始截取的部分，正值为y值+从上部开始内容区域
& & & &4. hsapce x方向显示的区域，负值为从目标网页左侧开始截图的部分，正值为x值+从左侧开始内如区域
& & & &5. src 目标网页的地址，可以为html，asp，文本等内如
& & & &6. frameborder 框架边框，0为无边框（画中画效果）
& & & &7. scrolling 是否显示滚动，yes显示
& & & &8. align：指定浮动窗口内的页面相对于浮动窗口的位置，它的值有left、right、top、middle、bottom
& & & &9. marginwidth、marginheight 目标网页被框架覆盖的深度
& & & 方法一,以百度主页http://www.baidu.com为例，去掉百度的Logo部分，代码与效果如下：
& & &title&Iframe标签显示目标网页的指定区域，方法1&/title&
&div align="center"&
&iframe width="800" height="600" src="http://www.baidu.com" scrolling="no" hspace="-100" vspace="-150"&&/iframe&&
&/div&&/body&
& &方法二，使用DIV控制，这也是使用iframe框架的好处，因为它不像frame，它可以显示的网页的任意区域代码如下：
& & &title&Iframe标签显示目标网页的指定区域，方法1&/title&
&div align="center" style="margin:0"&
& & &div style="width:800height:600overflow:border:0px"&&
& & & & &&div style="width:500height:800margin:-153px 0px&
& & & & & & & &iFrame src="http://www.baidu.com" width="800" height="600" scrolling="no"&
& & & & & & &&/iFrame&
& & & & &&/div&&
& & &&/div&&
目前尚未找到按坐标来控制的办法，只有采用按顶、左、右边跑的方法来控制，因此要制作一个文件来完全调用目标网页内容，然后再在需要调用指定内容的地方使用iframe代码调用。
&&& 首先建立一个完全调用目标网页的文件，命名为files.html，代码如下：
&meta http-equiv=”Content-Type” content=”text/ charset=gb2312″&
&&title&AUDCNY&/title&
&body& &iframe src=”目标网址” width=”980″ height=”700″ frameborder=”0″ scrolling=”no” style=”position: top: -120 left: -680”&&/iframe&
&&& 这个页面用iframe框架引用了目标页面，并且用CSS定位设定了框架浮动位置(top: -120 left: -680px)。当然也可以按右边距控制，如right:680px，距离大小可以根据情况调整，直到调整到合适的位置。
&&& 然后在需要调用目标内容的文件中合适的位置放入以下代码：
&iframe src=”这里填写上面保存的html文档的地址” width=”300″ height=”230″ frameborder=”0″ scrolling=”no”&&/iframe&
&&& 高宽可以根据情况调整，为了使调用的内容正常、正确显示的我们设定的位置，大家可以修改files.html里的边距控制量以达到最佳效果。
& 上一篇：
：下一篇 &
发表我的评论Web前后台开发技术专栏
JS元素位置和位置坐标
常见的属性：
网页可见区域宽： document.body.clientW
网页可见区域高： document.body.clientH
网页可见区域宽： document.body.offsetWidth
（包含边线的宽）;
网页可见区域高： document.body.offsetHeight （包含边线的高）;
网页正文全文宽： document.body.scrollW（含滚动条时，即滚动条从最顶端滚到最底端实际走过的距离）
网页正文全文高： document.body.scrollH（含滚动条时，即滚动条从最顶端滚到最底端实际走过的距离）
网页被卷去的高： document.body.scrollT
网页被卷去的左： document.body.scrollL
网页正文项目组上： window.screenT（返回窗口相对于屏幕的y坐标）
网页正文项目组左： window.screenL（返回窗口相对于屏幕的x坐标）
屏幕辨别率的高： window.screen.（返回当前屏幕高度，即分辨率值）
屏幕辨别率的宽： window.screen.（返回当前屏幕宽度，即分辨率值）
屏幕可用工作区高度： window.screen.availH（空白空间）
屏幕可用工作区的宽度：window.screen.availW（空白空间）
（1）offsetLeft
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 间隔上方或上层控件的地位，整型，单位像素。
obj.offsetLeft 指 obj 间隔左方或上层控件的地位，整型，单位像素。
{I}、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
{II}、offsetTop 只读，而 style.top 可读写。
{III}、若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
（2）clientWidth/clientHeight,offsetWidth/offsetHeight,scrollWidth/scrollHeight
IE、Opera 认为 offsetHeight = clientHeight + 迁移转变条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
clientHeight
就是透过浏览器看内容的这个区域高度。
FF 认为 offsetWidth/offsetHeight 和 scrollWidth/scrollHeight 都是网页内容高度，只不过当网页内容高度小于便是 clientWidth/clientHeight 时，scrollWidth/scrollHeight 的值是 clientWidth/clientHeight，而 offsetWidth/offsetHeight 可以小于clientWidth/ clientHeight。IE、Opera
认为 offsetWidth/offsetHeight 是可视区域 clientWidth/clientHeight 迁移转变条加边框。scrollWidth/scrollHeight 则是网页内容实际高度。
（3）scrollTop/scrollLeft.scrollWidth/scrollHeight
IE 和 FireFox 周全支撑，而 Netscape 和 Opera 不支撑 scrollTop、scrollLeft（document.body 除外）。
scrollWidth/scrollHeight
是内部元素的绝对宽度/高度，包含内部元素的隐蔽的项目组。
（4）offsetWidth/offsetHeight
与style.width属性的差别在于:如对象的宽度设定值为百分比宽度，则无论页面变大还是变小，style.width都返回此百分比，而offsetWidth则返回在不合页面中对象的宽度值而不是百分比值
与style.height属性的差别在于:如对象的宽度设定值为百分比高度，则无论页面变大还是变小，style.height都返回此百分比，而offsetHeight则返回在不合页面中对象的高度值而不是百分比值
（5）offsetParent
offsetParent是个只读属性，返回最近显示指定位置的容器元素的引用。如果元素没有指定位置，最近的元素或者根元素（标准模式下是html，怪异模式下是body）就是offsetParent。当元素的style.display='none'时，offsetParent返回null。由于offsetTop和offsetLeft是相对于页边距，因此offsetParent是非常有用的。
浏览器兼容性
在以WebKit为核心的浏览器上，如果元素是隐藏的（该元素或者上级元素style.display='none'）或者元素自身style.position='fixed'，那么就会返回null。
在IE（9）上如元素style.position='fixed'，该属性就会返回null。（然而display:none不影响这个浏览器）
1、style.left,style.top,style.right,style.bottom的使用注意：
position的属性中有static、fixed、relative、absolute四个属性。常用relative和absolute。
（1）若指定为static时，DIV遵循HTML规则；
（2）若指定为relative时，可以用top、left、right、bottom来设置DIV在页面中的偏移，但是此时不可使用层；
（3）若指定为absolute时，可以用top、left、right、bottom对DIV进行绝对定位；
（4）若指定为fixed时，在IE7与FF中DIV的位置相对于屏幕固定不变，IE6中没有效果(期待高手指点原因)； left:设置对象相对于文档层次中最近一个定位对象的左边界的位置。 top:设置对象相对于文档层次中最近一个定位对象的上边界的位置。 right:设置对象相对于文档层次中最近一个定位对象的右边界的位置。 bottom:设置对象相对于文档层次中最近一个定位对象的下边界的位置。
ie6-ie8可使用可以直接用obj.style.top=100; 但在FireFox和ie9中必须加上单位，变成obj.style.top=100+'px';
style.left同理。
2、clientWidth = content + padding
clientHeight = content+ padding
（即：元素的clientWidth，clientHeight是指这个元素的包含补白在内的宽，高）
clientWidth与clientHeight都是只读属性，
3、scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。表示滚动条滚动的高度和宽度。
滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。
4、offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。（注意：不适用于表格和iframe内的元素）
5、getBoundingClientRect()方法。它返回一个矩形对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。【为了兼容把body加上margin:0;padding:0，注意加DOCTYPE声明（有了它IE还是挺听话的）】
javascript获得DOM元素X,Y坐标的函数
js中获取元素的当前位置
4.three.js中的坐标系
js 获取元素坐标 和鼠标点击坐标
js - 通过浏览器获取当前坐标
js获取div的坐标
JS 获取页面元素坐标
js获取dom元素绝对位置
用Javascript获取页面元素的位置
Javascript
getBoundingClientRect()来获取元素在页面的位置
没有更多推荐了，移动端js触摸touch详解（附带案例源码）
阅读模式：
移动端js触摸touch详解（附带案例源码）
查看：5860&
来源：php自学网&
&&& 移动端触摸滑动原理详解案例，实现过程通过添加DOM标签的触摸事件监听，并计算触摸距离，通过距离坐标计算触摸角度，最后通过触摸角度去判断往哪个方向触摸的。触摸的事件列表触摸的4个事件：touchstart&&&&& 触摸屏幕上时触发& touchmove&&& 触摸屏幕中滑动时触发& touchend&&&&&& 离开屏幕时触发& touchcancel&&& 系统取消触摸事件的时候触发监听触摸后触摸事件会实现一个event对象，这个对象里面包括3个触摸函数列表。触摸事件里的3个函数：touches&&&&& 屏幕上所有手指列表& targetTouches&&&&& 在当前DOM标签上手指的列表changedTouches&&&&& 涉及当前事件的手指的列表触摸函数的属性，用于获取坐标8个属性：clientX&& && 触摸目标在浏览器中的x坐标 clientY&&&&& 触摸目标在浏览器中的y坐标identifier& & & 标识触摸的唯一ID。 pageX&& && 触摸目标在当前DOM中的x坐标pageY&& && 触摸目标在当前DOM中的y坐标screenX&& && 触摸目标在屏幕中的x坐标screenY&&&&& 触摸目标在屏幕中的y坐标target&&&&& 触摸的DOM节点目标。Math.atan2()函数，计算角度的弧度值angel=Math.atan2(y,x)& x 指定点的 x 坐标y 指定点的 y 坐标angel是一个弧度值（可以比喻为直角三角形对角的角，其中 x 是邻边边长，而 y 是对边边长）atan2(x,y)*180/Math.PI&& 转换为角度触摸详细代码：&html&
&&&&&meta&charset=&utf-8&/&
&&&&&title&touch&test&/title&
&div&id=&box&&style=&width:100%;height:100%;border:1px&solid&&&&/div&
&&&&//定义变量，用于记录坐标和角度
&&&&var&startx,starty,movex,movey,endx,endy,nx,ny,
&&&&//开始触摸函数，event为触摸对象
&&&&function&touchs(event){
&&&&&&&&&&&&//阻止浏览器默认滚动事件
&&&&&&&&event.preventDefault();
&&&&&&&&//获取DOM标签
&&&&&&&&var&box&=&document.getElementById('box');
&&&&&&&&//通过if语句判断event.type执行了哪个触摸事件
&&&&&&&&if(event.type==&touchstart&){
&&&&&&&&&&&&&console.log('开始');
&&&&&&&&&&&&&
&&&&&&&&&&&&&//获取开始的位置数组的第一个触摸位置
&&&&&&&&&&&&var&touch&=&event.touches[0];
&&&&&&&&&&&&
&&&&&&&&&&&&&//获取第一个坐标的X轴
&&&&&&&&&&&&startx&=&Math.floor(touch.pageX);
&&&&&&&&&&&&
&&&&&&&&&&&&//获取第一个坐标的X轴
&&&&&&&&&&&&starty&=&Math.floor(touch.pageY);
&&&&&&&&&&&&
&&&&&&&&&&&&//触摸中的坐标获取
&&&&&&&&}else&if(event.type==&touchmove&){
&&&&&&&&&&&&&console.log('滑动中');
&&&&&&&&&&&&var&touch&=&event.touches[0];
&&&&&&&&&&&&movex&=&Math.floor(touch.pageX);
&&&&&&&&&&&&movey&=&Math.floor(touch.pageY);
&&&&&&&&&&&&
&&&&&&&&&&&&//当手指离开屏幕或系统取消触摸事件的时候
&&&&&&&&}else&if(event.type&==&&touchend&&||&event.type&==&&touchcancel&){
&&&&&&&&&&&&&&&&//获取最后的坐标位置
&&&&&&&&&&&&endx&=&Math.floor(event.changedTouches[0].pageX);
&&&&&&&&&&&&endy&=&Math.floor(event.changedTouches[0].pageY);
&&&&&&&&&&&&&console.log('结束');
&&&&&&&&&&&&&
&&&&&&&&&&&&&//获取开始位置和离开位置的距离
&&&&&&&&&&&&nx&=&endx-
&&&&&&&&&&&&ny&=&endy-
&&&&&&&&&&&&
&&&&&&&&&&&&//通过坐标计算角度公式&Math.atan2(y,x)*180/Math.PI
&&&&&&&&&&&&angle&=&Math.atan2(ny,&nx)&*&180&/&Math.PI;
&&&&&&&&&&&&
&&&&&&&&&&&&if(Math.abs(nx)&=1&||Math.abs(ny)&=1){
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&&&&&console.log('滑动距离太小');
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&&&&&//通过滑动的角度判断触摸的方向
&&&&&&&&&&&&if(angle&45&&&&angle&=-45){
&&&&&&&&&&&&&&&&alert('右滑动');
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}else&if(angle&135&&&&angle&=45){
&&&&&&&&&&&&&&&&alert('下滑动');
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}else&if((angle&=180&&&&angle&=135)&||&(angle&=-180&&&&angle&-135&)){
&&&&&&&&&&&&&&&&alert('左滑动');
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}else&if(angle&=-45&&&&angle&&=-135){
&&&&&&&&&&&&&&&&alert('上滑动');
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}
&&&&//添加触摸事件的监听，并直行自定义触摸函数
&&&&box.addEventListener('touchstart',touchs,false);
&&&&box.addEventListener('touchmove',touchs,false);
&&&&box.addEventListener('touchend',touchs,false);
&/html&最简单详细的触摸原理实例代码详解。touch demo文件下载：
扫描二维码手机查看
你可能喜欢:
发布评论：
推荐阅读：