新发现getBoundingClientRect() 来获取页面元素的位置

最新推荐文章于 2023-08-04 18:06:42 发布
最新推荐文章于 2023-08-04 18:06:42 发布
阅读量660 收藏
点赞数
分类专栏： js

getBoundingClientRect() 来获取页面元素的位置

 

document.documentElement.getBoundingClientRect

 

下面这是MSDN的解释：

Syntax

oRect = object.getBoundingClientRect()

Return Value

Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.

Remarks

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

 

还是实际解释下，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。也不好理解，下面用图说明下。

该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

 

 

 

下面的代码举了个简单的例子，可以滚动滚动条之后点红色区域看各个值的变化。

 

 

复制代码 
Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>

<body style="width:2000px; height:1000px;">
    <div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>
</body>
</html>
<script>
document.getElementById('demo').onclick=function (){
        if (document.documentElement.getBoundingClientRect) { 
            alert("left:"+this.getBoundingClientRect().left)
            alert("top:"+this.getBoundingClientRect().top)
            alert("right:"+this.getBoundingClientRect().right)
            alert("bottom:"+this.getBoundingClientRect().bottom)
            var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
            var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;
            alert("Demo的位置是X:"+X+";Y:"+Y)
        } 
}
</script>
复制代码

 

有了这个方法，获取页面元素的位置就简单多了，

            var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
            var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

 

 
  
 
 
 


                

        

        

    




    

      

        

            

              
                
                  appteam_vlctech
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

				
			

			

				

					01-21
				

			

		

		

			
				
this.$refs[‘通过设置ref获取到的dom元素’].getBoundingClientRect();

//示例: 获取元素距离顶部的距离
this.$refs.journalUpward.getBoundingClientRect().top

以上这篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

			
		

	



                

              
                



	

		

			

				
					
js getBoundingClientRect() 来获取页面元素的位置

				
			

			

				

					10-28
				

			

		

		

			
				
该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

			
		

	



                


  
              

                


	

		

			

				
					
getBoundingClientRect() 来获取页面元素的位置

				
			

			

				

					笨鸟快飞的专栏
				

				

					06-04
					
					724
					
				

			

		

		

			
				
document.documentElement.getBoundingClientRect 下面这是MSDN的解释：SyntaxoRect = object.getBoundingClientRect()Return ValueReturns a TextRectangle object. Each rectangle has four integer properties (top, left

			
		

	





	

		

			

				
					
获取元素相对于视口的位置 Element.getBoundingClientRect()  理解及笔记

				
			

			

				

					浅笑如伤的博客
				

				

					06-01
					
					3073
					
				

			

		

		

			
				
1、概念

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

2、语法

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是.

			
		

	



		

			
		



	

		

			

				
					
js获取页面元素位置的方法getBoundingClientRect()

				
			

			

				

					x_xiNan9416的博客
				

				

					10-14
					
					680
					
				

			

		

		

			
				
作用
getBoundingClientRect()是用来获取页面元素的位置的方法.这个方法最终返回的是一个矩形对象,包括四个属性:left,top,bottom,right
四个属性

top：元素上边到视窗上边的距离;
right：元素右边到视窗左边的距离;
bottom：元素下边到视窗上边的距离;
left：元素左边到视窗左边的距离;
width:边界矩形的宽度(ie9)
height:边界矩形的高度(ie9
)

注意：当我提到元素的边界矩形的时候，返回的大小包含了任何padding和border值

			
		

	





	

		

			

				
					
uniapp之boundingClientRect注意事项

				
			

			

				

					钬码狼酷的博客
				

				

					04-01
					
					5550
					
				

			

		

		

			
				
uniapp中boundingClientRect使用注意事项，用法、填坑等

			
		

	





	

		

			

				
					
js getBoundingClientRect() 来获取页面元素的位置.docx

				
			

			

				

					01-19
				

			

		

		

			
				
js getBoundingClientRect() 来获取页面元素的位置  js 中的 getBoundingClientRect() 方法用于获取页面元素的位置信息，该方法可以获取元素相对于客户端窗口的 left、top、right 和 bottom 坐标值。  js ...

			
		

	





	

		

			

				
					
Vue获取页面元素的相对位置的方法示例

				
			

			

				

					10-15
				

			

		

		

			
				
总的来说，在Vue中获取页面元素的相对位置，通常需要结合`getBoundingClientRect()`、`offsetTop`等方法，以及事件监听来实现特定的交互效果。在实际开发中，还要考虑性能优化，例如使用`throttle`或`debounce`函数...

			
		

	





	

		

			

				
					
javascript 获取元素位置的快速方法 getBoundingClientRect()

				
			

			

				

					10-29
				

			

		

		

			
				
总的来说，`getBoundingClientRect()`是JavaScript中一个非常实用的方法，它为开发者提供了一种高效、准确的方式来获取元素在网页中的位置信息，从而更好地控制和操作网页元素。在进行前端开发时，熟练掌握并灵活...

			
		

	





	

		

			

				
					
获取元素与页面距离的方法(getBoundingClientRect)

				
			

			

				

					hzxOnlineOk的博客
				

				

					01-04
					
					533
					
				

			

		

		

			
				
获取元素与页面距离的方法(getBoundingClientRect)，getBoundingClientRect就是“得到客户端矩形边界”的意思，或者使用邪恶记法记住“割(g)逼(b)艹(c)软(r)”。

			
		

	





	

		

			

				
					
如何获取元素在屏幕中的坐标getBoundingClientRect（缩放时动态获取坐标）

				
			

			

				

					weixin_40679578的博客
				

				

					07-03
					
					1884
					
				

			

		

		

			
				
我做的是在TRTC electron里面，有一个屏幕分享的功能，就只分享一个canvas画板出去，这就需要拿到整个屏幕中这个画板的起始坐标和宽高，从而获取到这个画板，如下图

坐标（x,y）就是这个画板在整个窗口的起始位置，然后知道画板的宽和高，就能拿到这个画板了，详情可参考canvas里的rect()方法，rect()详解
rect(x,y,w,h) ：x，y就是起始坐标，w，h就是宽和高。
并且rect（）可以动态设置坐标参数。
如果你也恰巧是要用TRTC electron，他的selectScreen

			
		

	





	

		

			

				
					
getBoundingClientRect获取DOM元素获取的宽和高以及位置

				
			

			

				

					tinfengyee的博客
				

				

					02-04
					
					2447
					
				

			

		

		

			
				
dom.getBoundingClientRect()
属性说明:
width, height: 元素的实际宽度 / 宽度
left: 元素左边距离视口左边的距离
right: 元素右边距离视口左边的距离
top: 元素上边距离视口上边的距离
bottom: 元素下边距离视口上边的距离

注意:
宽高包含padding, border
距离根据视口/文档?为起点, 而不是父元素

x, y: 元素...

			
		

	





	

		

			

				
					
getBoundingClientRect().top 获取到的值不正确

				
			

			

				

					lala1091的博客
				

				

					04-08
					
					3559
					
				

			

		

		

			
				
问题：

在页面里获取到的是正确的，放到js里就获取不到了

解决方法：

把方法放在 window.onload = () => {} 里

原因：

因为页面还没有加载完，就开始获取top值了




			
		

	





	

		

			

				
					
getBoundingClientRect.left的奇思妙想，移动端获取摁下位置距离窗口的绝对位置

				
			

			

				

					小漠007的专栏
				

				

					06-21
					
					812
					
				

			

		

		

			
				
有样式如下，求#box距离浏览器左边的距离


    *{
      margin:0;
      padding:0;
    }
    #box{
      position: absolute;
      left:10px;
      top:30px;
      width:40px;
      height:40px;
      background: pink;
      transform:rotate(33deg);
      border-left:1px sol

			
		

	





	

		

			

				
					
getBoundingClientRect 获取的数据不正确

					
最新发布

				
			

			

				

					qq_42704945的博客
				

				

					08-04
					
					5209
					
				

			

		

		

			
				
然后组件就定位到了和容器组件一样的位置。需要帮这个容器组件定位到我图上的位置我还需要获取tooltip组件的大小还做运算。我在实现一个tooltip组件的时候需要在鼠标移入的时候获取当前trigger容器的位置以及tooltip组件的位置。像这样我获取这个容器的位置大小使用getBoundingClientRect这个函数是没有任何问题的数值都是准确的。问题就出现了我获取的tooltip的大小比实际的大小要小一些。解决问题我们把获取的数值除以这个scale()数值=》tooltip真实的大小了。

			
		

	





	

		

			

				
					
getBoundingClientRect函数获取视图位置的坑

				
			

			

				

					YICONGITSME的博客
				

				

					05-11
					
					6105
					
				

			

		

		

			
				
最近在做一个功能，把新手引导的提示定位在申请的上方，申请的位置是会根据前面功能的不展示而向前移动的，所以位置是不固定的，因此新手引导的位置要根据申请元素的位置来定位。

我使用了getBoundingClientRect函数来获取申请dom元素距离视图的距离。


    getTypeHighLightDom(item) {
        const dom = document.querySelector(item.selector);
        let domLocal;
       ...

			
		

	





	

		

			

				
					
uniapp开发遇到的小需求

				
			

			

				

					qq_41306452的博客
				

				

					07-28
					
					406
					
				

			

		

		

			
				
uniapp开发遇到的小需求。

			
		

	





	

		

			

				
					
【uniapp】小程序获取自定义导航高与胶囊按钮定位的两个api

				
			

			

				

					ONLYSRY的博客
				

				

					08-01
					
					3840
					
				

			

		

		

			
				
在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。.....................

			
		

	





	

		

			

				
					
获取dom元素尺寸大小（含uniapp小程序、h5开发获取方法）

				
			

			

				

					qq_40868156的博客
				

				

					08-21
					
					2781
					
				

			

		

		

			
				
一、domEle.getBoundingClientRect()
获取对应元素的大小及其相对于视窗的位置，返回一个包含left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的参数对象，除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。如下图：

视窗指的是能够显示页面内容的浏览器窗口。
该api详细说明可点击此链接查看：Element.getBoundingClientRect()
**注：width、height包含内边

			
		

	





	

		

			

				
					
使用getBoundingClientRect高效获取页面元素位置

				
			

			

				

					
				

			

		

		

			
				
"本文档主要介绍了JavaScript中的`getBoundingClientRect()`方法，用于获取页面元素的位置信息。这个方法不再仅限于Internet Explorer，而是被Firefox 3.0+和Opera 9.5+等现代浏览器广泛支持，提高了获取元素位置的...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值