• <menu id="sssag"></menu>
  • <menu id="sssag"></menu>
  • 前端好用API之getBoundingClientRect

    前情

    在前端開發需求中,經常需要獲取元素的尺寸位置相關的屬性,以往的做法是調用不同api獲取相關屬性的。

    getBoundingClientRect介紹

    getBoundingClientRect()方法返回元素的大小及其相對于視口的位置。

    標準盒子模型:元素的尺寸等于width/height + padding + border-width的總和。如果box-sizing: border-box,則元素的的尺寸等于 width/height。

    topleftrightbottom屬性是使用對象的其他屬性的值來計算獲得的,Object.keys()查找時將失敗,Object.assign()無法復制返回的屬性

    調用方式:

    domRect = element.getBoundingClientRect();
    

    domRect對象介紹

    domRect 這個對象是由該元素的 getClientRects()方法返回的一組矩形的集合
    left 元素左邊距離瀏覽器可視窗左邊的距離
    right 元素右邊距離瀏覽器視可視窗左邊的距離
    top 元素頂邊距離瀏覽器視可視窗頂邊的距離
    bottom 元素底邊距離瀏覽器視可視窗頂邊的距離
    width 元素自身的寬
    height 元素自身的高
    x 元素左邊距離瀏覽器可視窗左邊的距離
    y 元素頂邊距離瀏覽器可視窗頂邊的距離

    考慮到兼容性問題,盡量僅使用 lefttopright, 和 bottom屬性是最安全的

    使用示例

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    	<style>
    		*{
    		  padding: 0;
    		  margin: 0;
    		}
    		.container{
    		  width: 300px;
    		  height: 300px;
    		  overflow:auto;
    		}
    		.item{
    		  width: 600px;
    		  height: 60px;
    		  text-align: left;
    		  line-height: 60px;
    		  margin: 60px 0 0 60px;
    		  color: white;
    		  background-color: blue;
    		}
    		.tips{
    		  padding: 10px;
    		}
    		.rect_detail{
    		  padding: 10px;
    		  color: green;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
        <div class="item">DOM0</div>
        <div class="item">DOM1</div>
        <div class="item">DOM2</div>
        <div class="item">DOM3</div>
      </div>
      <p class="tips">拖動滾動條查看值變化:</p>
      <div class="rect_detail">
        DOM2元素:
      </div>
    	<script>
    		var doms = document.querySelectorAll('.item');
    		var container = document.querySelector('.container');
    		var result = document.querySelector('.rect_detail');
    		
    		container.addEventListener('scroll', function() {
    		  var donRect = doms[2].getBoundingClientRect();
    		  result.innerHTML = "DOM2元素:<br />" +
    		  "left:"+donRect.left + "<br />" +
    		  "right:"+donRect.right + "<br />" +
    		  "top:"+donRect.top + "<br />" +
    		  "bottom:"+donRect.bottom + "<br />" +
    		  "width:"+donRect.width + "<br />" +
    		  "height:"+donRect.height + "<br />" +
    		  "x:"+donRect.x + "<br />" +
    		  "y:"+donRect.y;
    		}, false);
    	</script>
    </body>
    </html>
    

    演示地址:https://jsbin.com/wozabey/1/edit?html,css,js,output

    posted @ 2022-03-07 20:39  !win !  閱讀(113)  評論(0編輯  收藏  舉報
    国产在线码观看超清无码视频,人妻精品动漫H无码,十大看黄台高清视频,国产在线无码视频一区二区三区,国产男女乱婬真视频免费,免费看女人的隐私超爽,狠狠色狠狠色综合久久蜜芽