生活随笔
收集整理的這篇文章主要介紹了
JS 获取控件的绝对位置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JS 獲取控件的絕對位置 js獲取控件的絕對位置 已經控件寬度和高度 2010-08-11 13:07
| //獲取控件左絕對位置 function getAbsoluteLeft(objectId) {
o = document.getElementById(objectId)
oLeft = o.offsetLeft????????????
while(o.offsetParent!=null) {
oParent = o.offsetParent????
oLeft += oParent.offsetLeft
o = oParent
}
return oLeft
}
//獲取控件上絕對位置
function getAbsoluteTop(objectId) {
o = document.getElementById(objectId);
oTop = o.offsetTop;
while(o.offsetParent!=null)
{??
oParent = o.offsetParent?
oTop += oParent.offsetTop? // Add parent top position
o = oParent
}
return oTop
} //獲取控件寬度 function getElementWidth(objectId) {
x = document.getElementById(objectId);
return x.offsetWidth;
} ? 范例演示： ? <!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>
??? <title>無標題頁</title>
??? <script type="text/javascript">
???????? function showTip(objShowID,objValueID)
??????? {
??????????? var objToolTip= document.getElementById('toolTip');
??????????? var objToolTipText=document.getElementById(objValueID);
??????????? objToolTip.innerText=objToolTipText.innerText;
??????????? objToolTip.style.display='block';
???????????
???????????
??????????? objToolTip.style.pixelLeft=getAbsoluteLeft(objShowID);
??????????? objToolTip.style.pixelTop=getAbsoluteTop(objShowID)+d.offsetHeight;
??????? }
???????
?????? //獲取控件左絕對位置 ??????? function getAbsoluteLeft(objectId) {
??????????? o = document.getElementById(objectId)
??????????? oLeft = o.offsetLeft???????????
??????????? while(o.offsetParent!=null) {
??????????? oParent = o.offsetParent???
??????????? oLeft += oParent.offsetLeft
??????????? o = oParent
??????????? }
??????????? return oLeft
??????? }
??????? //獲取控件上絕對位置
??????? function getAbsoluteTop(objectId) {
??????????? o = document.getElementById(objectId);
??????????? oTop = o.offsetTop;
??????????? while(o.offsetParent!=null)
??????????? {?
??????????? oParent = o.offsetParent
??????????? oTop += oParent.offsetTop? // Add parent top position
??????????? o = oParent
??????????? }
??????????? return oTop
??????? } ????
??????? function Hidden()
??????? {
??????????? var objToolTip= document.getElementById("toolTip");
??????????? objToolTip.style.display='none';
??????? }
???????
??????
??? </script>
??? <style>
??????? .promptDiv
??????? {
??????????? border: solid 1px #D1CDC5;
??????????? width: 300px;
??????????? height: 70px;
??????????? position: absolute;
??????????? display: none;
??????????? background-color: #F6F5F3;
??????????? padding: 5px;
??????????? overflow-y: auto;
??????? }
??? </style>
</head>
<body id="bd">
??? <a οnmοuseοver="javascript:showTip('d','div1')">aaaaaaaaa</a><br />
??? <a οnmοuseοver="javascript:showTip('d','div2')">ssssssssssssss</a><br />
??? <a οnmοuseοver="javascript:showTip('d','div3')">dddddddddddd</a>
???
??? <div id="div1" style="display:none;">adfasdfasdfasdfasdf</div>
??? <div id="div1"? style="display:none;">adfasdfasdfasdfasdf</div>
??? <div id="div2"? style="display:none;">ddddddddddddddddd</div>
??? <div id="div3"? style="display:none;">adfasdfddddddddddddasdfasdfasdf</div>
??? <div id="div3"? style="display:none;">xcvzxcvzcxvzxcv</div>
??? <div id="toolTip" class="promptDiv"></div>
???
??? <br />
??? <br />
??? <br />
??? <br />
??? <br />
??? <br />
??? <br />
??? <br />
??? <br />
??? <div id="d">ddddddds</div>
</body>
</html>
? ? ? ? ? ? ? ? ? ? |
posted on
2010-12-14 17:16 鉆石眼淚 閱讀(
...) 評論() 編輯 收藏
轉載于:https://www.cnblogs.com/huanghai223/archive/2010/12/14/1905884.html
總結
以上是生活随笔為你收集整理的JS 获取控件的绝对位置的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
