原生JS獲取元素的位置與尺寸

原創

2019-08-28 17:58

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container{
      width: 100%;
      height: 600px;
      border: 1px solid green;
    }
    #elediv{
      width: 400px;
      height: 60px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 60px;
      padding: 20px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="elediv">
      這是一個測試
    </div>
  </div>
  <script>
    var eldiv = document.getElementsByTagName('div')[1];
    console.log(eldiv);
    // 獲取到的是內容區 寬度 + 內邊距
    console.log('clientWidth',eldiv.clientWidth);
    // 獲取到的是內容區 高度 + 內邊距
    console.log('clientHeight',eldiv.clientHeight);
    // 內容區的 上邊框
    console.log('clientTop',eldiv.clientTop);
    // 內容區的 左邊框
    console.log('clientLeft',eldiv.clientLeft);
    // 內容區的 寬度 + 左右內邊距 + 左右邊框
    console.log('offsetWidth',eldiv.offsetWidth);
    // 內容區的 高度 + 上下內邊距 + 上下邊框
    console.log('offsetHeight',eldiv.offsetHeight);
    // 內容區的 大小 和 相對視口的位置
    // top    內容區 上邊界 和 父元素 上邊界的距離
    // bottom 內容區 下邊界 和 父元素 上邊界的距離
    // left   內容區 左邊界 和 父元素 左邊界的距離
    // right  內容區 右邊界 和 父元素 左邊界的距離
    // height 內容區 + 上下內邊距 + 上下邊框
    // width  內容區 + 左右內邊距 + 左右邊框
    // x/y    元素左上角和父元素左上角的距離
    console.log('getBoundingClientRect',eldiv.getBoundingClientRect());
    // 可視區域的寬度
    console.log('document.documentElement.clientWidth',document.documentElement.clientWidth);
    // 可視區域的高度
    console.log('document.documentElement.clientHeight',document.documentElement.clientHeight);
    // 頁面的實際大小
    console.log('document.documentElement.scrollWidth',document.documentElement.scrollWidth);
    console.log('document.documentElement.scrollHeight',document.documentElement.scrollHeight);
    // 窗口左上角與屏幕左上角的距離
    console.log('window.screenX',window.screenX);
    console.log('window.screenY',window.screenY);
    // 屏幕的寬高
    console.log('window.screen.width',window.screen.width);
    console.log('window.screen.height',window.screen.height);
    // 屏幕可用寬高（去除任務欄）
    console.log('window.screen.availWidth',window.screen.availWidth);
    console.log('window.screen.availHeight',window.screen.availHeight);
    // 窗口的內高度、內寬度（文檔顯示區域+滾動條）
    console.log('window.innerWidth',window.innerWidth);
    console.log('window.innerHeight',window.innerHeight);
    // 窗口的外高度、外寬度
    console.log('window.outerWidth',window.outerWidth);
    console.log('window.outerHeight',window.outerHeight);

  </script>
</body>
</html>

1.clientwWidth,clientHeight（width + padding,height + padding）

2.clientTop,clientLeft（border-top,border-left）

3.offsetWidth,offsetHeight（width + padding + border, height + padding + border）

4.getBoundingClientRect() （top, bottom , left , right , x ,y ,width）

5.document.documentElement.clientWidth, document.documentElement.clientHeight （可視區域的寬高）
6.document.documentElement.scrollWidth, document.documentElement.scrollHeight （頁面的實際大小，包括滾動條以下的高度）