javascript中的页面元素定位
2006-11-28 15:23
381 查看
一. 学习目标
了解关于页面对象定位的相关属性,能熟练的把任一对象定位到网页的任意位置。需掌握的属性列表为:n offsetX、offsetY
n clientX、clientY
n screenX、screenY
n x、y
n scrollLeft、scrollTop
n left、top
二. 详细说明
clientX、clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0;offsetX、offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0;
screenX、screenY是鼠标相对于用户整个屏幕的位置;
x、y是鼠标当前相对于当前浏览器的位置
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(因为有滚动条的产生,所以目前页面可见内容是不定的)。
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
left:对象相对于页面的X坐标。
top:对象相对于页面的Y坐标。
附一原创的右键菜单:
window.js |
/** * 创建右键菜单 在页面对象上加入 onconetextmenu=openEventWindow('','','','');return false; addUrl 添加动作的url地址 modUrl 修改动作的url地址 delUrl 删除动作的url地址 detailUrl 详细动作的url地址 注意:请保持四个参数的完整性,如果需要禁用删除动作,请设置delUrl='' */ var menuFlag = false; function openEventWindow(addUrl,modUrl,delUrl,detailUrl){ var addTr; var modTr; var delTr ; var detailTr ; if(addUrl==''){ addTr = "<tr disabled class=/"2k3MenuItem/">" }else{ addTr = "<tr class=/"2k3MenuItem/" onclick=/"link('"+addUrl+"')/">" } if(modUrl==''){ modTr = "<tr disabled class=/"2k3MenuItem/">" }else{ modTr = "<tr class=/"2k3MenuItem/" onclick=/"link('"+modUrl+"')/">" } if(delUrl==''){ delTr = "<tr disabled class=/"2k3MenuItem/">" }else{ delTr = "<tr class=/"2k3MenuItem/" onclick=/"link('"+delUrl+"')/">" } if(detailUrl==''){ detailTr = "<tr disabled class=/"2k3MenuItem/">" }else{ detailTr = "<tr class=/"2k3MenuItem/" onclick=/"link('"+detailUrl+"')/">" } var divFrame = window.document.createElement("DIV"); divFrame.id = "div"+randomChar(10); divFrame.style.display="block"; divFrame.innerHTML="<table class=/"2k3Menu/" width=/"100px/" style=/"visibility:visible;/" id=/"M01/" backgroundIframe=/"IM0/" cellspacing=0 cellpadding=0>" +"<thead>" +"<tr>" +"<td colspan=5>" +"<div class=/"2k3MenuRootConnector/"></div>" +"</td>" +"</tr>" +"</thead>" +"<tbody>" +addTr +"<td class=/"2k3MenuVerticalSpacerLeft/"></td>" +"<td class=/"2k3MenuImage/"><img src=/"images/transparent.gif/" height=16 width=16></td>" +"<td class=/"2k3MenuCaption/">添加</td>" +"<td class=/"2k3MenuNoMore/"> </td>" +"<td class=/"2k3MenuVerticalSpacerRight/"></td>" +"</tr>" +modTr +"<td class=/"2k3MenuVerticalSpacerLeft/"></td>" +"<td class=/"2k3MenuImage/"><img src=/"images/transparent.gif/" height=16 width=16></td>" +"<td class=/"2k3MenuCaption/">修改</td>" +"<td class=/"2k3MenuNoMore/"> </td>" +"<td class=/"2k3MenuVerticalSpacerRight/"></td>" +"</tr>" +delTr +"<td class=/"2k3MenuVerticalSpacerLeft/"></td>" +"<td class=/"2k3MenuImage/"><img src=/"images/transparent.gif/" height=16 width=16></td>" +"<td class=/"2k3MenuCaption/">删除</td>" +"<td class=/"2k3MenuNoMore/"> </td>" +"<td class=/"2k3MenuVerticalSpacerRight/"></td>" +"</tr>" +detailTr +"<td class=/"2k3MenuVerticalSpacerLeft/"></td>" +"<td class=/"2k3MenuImage/"><img src=/"images/transparent.gif/" height=16 width=16></td>" +"<td class=/"2k3MenuCaption/">详细</td>" +"<td class=/"2k3MenuNoMore/"> </td>" +"<td class=/"2k3MenuVerticalSpacerRight/"></td>" +"</tr>" +"</tbody>" +"<tfoot>" +"<tr>" +"<td colspan=/"5/"></td>" +"</tr>" +"</tfoot>" +"</table>"; document.body.appendChild(divFrame); divFrame.style.position="absolute"; divFrame.style.left = event.clientX; divFrame.style.top = event.clientY; divFrame.attachEvent("onmousemove",function change(){menuFlag=true}); divFrame.attachEvent("onmouseout", function change1() {menuFlag=false}); document.attachEvent("onclick",function hideDiv(){ if(!menuFlag){ divFrame.style.display="none"; } }) return false; } |
相关文章推荐
- 使用javascript定位页面元素小窍门
- webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
- JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)
- 用Javascript获取页面元素的位置
- Javascript获取页面元素的绝对位置
- 菜鸟学自动化测试(五)-----selenium命令之定位页面元素
- 定位页面元素
- JavaScript、jQuery获取页面及个元素高度、宽度
- javascript full screen 全屏显示 页面元素
- Javascript获取页面元素的位置
- javaScript获取元素位置以及元素页面大小总结
- IE6/IE7 iframe嵌入页面定位元素与滚动条重叠
- javascript getBoundingClientRect() 来获取页面元素的位置的代码
- selenium 页面元素的定位方法
- jQuery实现页面元素智能定位
- 用Javascript获取页面元素的位置
- 【原】HTML页面元素加载顺序研究报告(4)----用JavaScript插入图片
- Web UI自动化测试框架搭建之九:Selenium定位web页面元素的原则、方法、工具