• 获得当前元素的绝对位值


                 在网页设计中经常要得到元素的绝对位值,以便让自己弹出的层不在页面上变形。所以我们要得到点击元素的绝对坐标。在看阿里的js的时候,看到一个,能支持三种浏览器,所以在下边贴以下:
    调用的方法很简单:
    <input type="button" onclick="Show(this)" id="Button2" value="clickMe" /><br />
    <script type="text/javascript">
        
    function Show(checkEl)
        { 
             document.getElementById(
    "tishiDiv").style.display = "block";
          document.getElementById(
    "tishiDiv").style.position = "absolute";
          document.getElementById(
    "tishiDiv").style.top = getXY(checkEl)[1]+12+"px";
          document.getElementById(
    "tishiDiv").style.left = getXY(checkEl)[0]-10+"px";
            
        }
        
    /**
     * 获取对象el的X,Y坐标
     * @param {Object} el
     
    */
    function getXY(el){
      
    var pos;
      
    if(this.getExplorerType()==1){
        
    var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        
    var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
        pos 
    = [el.getBoundingClientRect().left+scrollLeft, el.getBoundingClientRect().top+scrollTop];
      }
    else{
        pos 
    = [el.offsetLeft, el.offsetTop];
        
    var parentNode = el.offsetParent;
        
    if (parentNode != el) {
          
    while (parentNode) {
            pos[
    0+= parentNode.offsetLeft;
            pos[
    1+= parentNode.offsetTop;
            parentNode 
    = parentNode.offsetParent;
          }
        }
        
    if (el.parentNode) { parentNode = el.parentNode; }
        
    else { parentNode = null; }
                
        
    while (parentNode && parentNode.tagName.toUpperCase() != 'BODY' && parentNode.tagName.toUpperCase() != 'HTML'){
          
    if (parentNode.style.display != 'inline') {
            pos[
    0-= parentNode.scrollLeft;
            pos[
    1-= parentNode.scrollTop;
          }

          
    if (parentNode.parentNode) {
            parentNode 
    = parentNode.parentNode; 
          } 
    else { parentNode = null; }
        }
      }
      
    return pos;
    }
    function getExplorerType(){
      
    var ua = navigator.userAgent.toLowerCase();
      
    if(window.ActiveXObject){
        
    return 1;
      }
    else if((ua.indexOf('firefox')>-1)){
        
    return 2;
      }
    else if((ua.indexOf('opera')>-1)){
        
    return 3;
      }
    }
        
    </script>
  • 相关阅读:
    Centos8 安装mongodb
    java 时间处理
    从技术走向管理李元芳履职记 读书记录
    debian基本操作
    centos8 安装kudu
    k8s api调用示例
    idea other settings
    C# Random生成相同随机数的解决方案
    DropDownList绑定选择数据报错问题
    离谱
  • 原文地址:https://www.cnblogs.com/xbf321/p/889797.html
Copyright © 2020-2023  润新知