Sealyu

          --- 博客已遷移至: http://www.sealyu.com/blog

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            618 隨筆 :: 87 文章 :: 225 評論 :: 0 Trackbacks
          用 Javascript 獲取指定頁面元素的位置是一個非常常見的需求,本文介紹的方法能夠準確返回一個元素相對于整個文檔左上角的坐標,即元素的 top 、left 的位置,而且能夠兼容瀏覽器,相信對新手非常有用。

          1. <script language="javascript" type="text/javascript">  
          2.   
          3. <!--    
          4.   
          5. // 說明:用 Javascript 獲取指定頁面元素的位置   
          6.   
          7. // 整理:http://www.codebit.cn   
          8.   
          9. // 來源:YUI DOM    
          10.   
          11. function getElementPos(elementId) {  
          12.   
          13.     var ua = navigator.userAgent.toLowerCase();       
          14.   
          15.     var isOpera = (ua.indexOf('opera') != -1);       
          16.   
          17.     var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof        
          18.   
          19.     var el = document.getElementById(elementId);   
          20.   
          21.           
          22.   
          23.     if(el.parentNode === null || el.style.display == 'none'){ return false; }        
          24.   
          25.     var parent = null;  
          26.   
          27.     var pos = [];     //不定長數組?  
          28.   
          29.     var box;        
          30.   
          31.     if(el.getBoundingClientRect){  //IE       
          32.   
          33.         box = el.getBoundingClientRect();          
          34.   
          35.         var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);          
          36.   
          37.         var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);            
          38.   
          39.         return {x:box.left + scrollLeft, y:box.top + scrollTop};       
          40.   
          41.     }else if(document.getBoxObjectFor){   // gecko                  
          42.   
          43.         box = document.getBoxObjectFor(el);                       
          44.   
          45.         var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;           
          46.   
          47.         var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;            
          48.   
          49.         pos = [box.x - borderLeft, box.y - borderTop];       
          50.   
          51.     }else{    // safari & opera       
          52.   
          53.         pos = [el.offsetLeft, el.offsetTop];          
          54.   
          55.         parent = el.offsetParent;           
          56.   
          57.         if (parent != el) {  
          58.   
          59.             while (parent) {                   
          60.   
          61.                 pos[0] += parent.offsetLeft;                 
          62.   
          63.                 pos[1] += parent.offsetTop;               
          64.   
          65.                 parent = parent.offsetParent;              
          66.   
          67.             }  
          68.   
          69.         }           
          70.   
          71.         if (ua.indexOf('opera') != -1  || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )){                
          72.   
          73.             pos[0] -= document.body.offsetLeft;               
          74.   
          75.             pos[1] -= document.body.offsetTop;           
          76.   
          77.         }        
          78.   
          79.     }              
          80.   
          81.     if (el.parentNode) {   
          82.   
          83.         parent = el.parentNode;   
          84.   
          85.     } else {   
          86.   
          87.         parent = null;   
          88.   
          89.     }         
          90.   
          91.     while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors          
          92.   
          93.         pos[0] -= parent.scrollLeft;           
          94.   
          95.         pos[1] -= parent.scrollTop;        
          96.   
          97.         if (parent.parentNode) {   
          98.   
          99.             parent = parent.parentNode;   
          100.   
          101.         } else {   
          102.   
          103.             parent = null;   
          104.   
          105.         }       
          106.   
          107.     }       
          108.   
          109.     return {x:pos[0], y:pos[1]};  
          110.   
          111. }  //-->   
          112.   
          113. </script> 


          第二種方法:
          function WebForm_GetElementPosition(element) {
              var result = new Object();
              result.x = 0;
              result.y = 0;
              result.width = 0;
              result.height = 0;
              if (element.offsetParent) {
                  result.x = element.offsetLeft;
                  result.y = element.offsetTop;
                  var parent = element.offsetParent;
                  while (parent) {
                      result.x += parent.offsetLeft;
                      result.y += parent.offsetTop;
                      var parentTagName = parent.tagName.toLowerCase();
                      if (parentTagName != "table" &&
                          parentTagName != "body" &&
                          parentTagName != "html" &&
                          parentTagName != "div" &&
                          parent.clientTop &&
                          parent.clientLeft) {
                          result.x += parent.clientLeft;
                          result.y += parent.clientTop;
                      }
                      parent = parent.offsetParent;
                  }
              }
              else if (element.left && element.top) {
                  result.x = element.left;
                  result.y = element.top;
              }
              else {
                  if (element.x) {
                      result.x = element.x;
                  }
                  if (element.y) {
                      result.y = element.y;
                  }
              }
              if (element.offsetWidth && element.offsetHeight) {
                  result.width = element.offsetWidth;
                  result.height = element.offsetHeight;
              }
              else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
                  result.width = element.style.pixelWidth;
                  result.height = element.style.pixelHeight;
              }
              return result;
          }
          posted on 2009-02-23 11:34 seal 閱讀(895) 評論(0)  編輯  收藏 所屬分類: Javascript
          主站蜘蛛池模板: 万荣县| 河间市| 香格里拉县| 湟源县| 叙永县| 军事| 宣城市| 石嘴山市| 灵宝市| 琼海市| 舞钢市| 柳河县| 阿荣旗| 科技| 门源| 天柱县| 开平市| 梁河县| 桓仁| 龙泉市| 东乌珠穆沁旗| 厦门市| 满洲里市| 娱乐| 华蓥市| 土默特左旗| 香格里拉县| 佛学| 新乡县| 兴隆县| 大渡口区| 来凤县| 西和县| 平和县| 莒南县| 浦县| 哈密市| 平塘县| 林芝县| 平安县| 永德县|