HTML | DOM getBoundingClientRect() 方法

HTML DOM getBoundingClientRect() 方法返回视口的相对定位。
它返回八个属性：左、上、右、下、x、y、宽度、高度。
滚动将改变位置值。

句法：

var rect = div.getBoundingClientRect();

例子：

  

    
        HTML | DOM getBoundingClientRect() Method
    
    
        function myFunction() {
            var div = document.getElementById("myDiv");
            var rectangle = div.getBoundingClientRect();
            x = rectangle.left;
            y = rectangle.top;
            w = rectangle.width;
            h = rectangle.height;
  
            alert("Left:" + x + ", Top:" + y +
                ", Width:" + w + ", Height:" + h);
        }
    

  

    
        GET POSITION
    
    
  
        
  
            Use scrollbar to change the position.
        
        
        
    
    
  

  

输出：
点击前：

点击后：

支持的浏览器：

• 铬 1.0
• 浏览器 9.0
• 火狐 3.0
• 歌剧 9.5
• Safari 4.0