JS 各類寬高

時間  2019-12-10
標籤 各類 欄目 JavaScript 简体版
原文   原文鏈接

一、window的各類寬高   outerWidth、innerWidth、outerHeight、innerHeightcss

outerHeight 獲取瀏覽器窗口外部的高度（單位：像素）。表示整個瀏覽器窗口的高度，包括側邊欄（若是存在）、窗口鑲邊（window chrome）和調整窗口大小的邊框（window resizing borders/handles）html

innerHeight 瀏覽器視口的高度（單位：像素），若是存在水平滾動條則包括它web

outerWidth 獲取瀏覽器窗口外部的寬度（單位：像素）。表示整個瀏覽器窗口的寬度，包括側邊欄（若是存在）、窗口鑲邊（window chrome）和調整窗口大小的邊框（window resizing borders/handles）chrome

innerWidth 瀏覽器視口的寬度（單位：像素），若是存在垂直滾動條則包括它windows

下圖中能夠看到，outerWidth 和 outerHeight 不只包含瀏覽器窗口的寬高，還包括窗口鑲邊api

下圖中能夠看到，innerWidth和innerHeight，所謂的視口寬高不只包含內容還包括padding瀏覽器

以上四個屬性僅適用於 IE9+，對於老IE 則需注意兩點：ide

（1）、IE8及如下不支持 outerWidth 和 outerHeight，且沒有提供替代的屬性佈局

（2）、針對 innerWidth 和 innerHeight，能夠用過 document.documentElement.clientWidth/Height (標準模式) 和 document.body.clientWidth/Height (混雜模式) 替代測試

下圖中能夠看到IE8 不支持以上四個屬性：

IE8及如下針對 innerWidth 和 innerHeight 的兼容性寫法：

var innerWidth = window.innerWidth,
     innerHeight = window.innerHeight;
    
if(typeof innerWidth !== 'number') {
      if (document.compatMode == "CSS1Compat") { // 當前文檔渲染模式是 「標準模式」
        innerWidth = document.documentElement.clientWidth
        innerHeight = document.documentElement.clientHeight
      } else{ // 當前文檔渲染模式是 「混雜模式」
        innerWidth = document.body.clientWidth
        innerHeight = document.body.clientHeight
      }
}
console.log('innerWidth: ' + innerWidth)
console.log('innerHeight: ' + innerHeight)

如下兩組屬性，聲明瞭窗口的左上角在屏幕上的 x 座標 和 y 座標，都不存在兼容性問題

screenLeft /  screenTop  適用於 IE、Safari 和 Opera

screenX / screenY          適用於 Firefox 和 Safari

下圖分別測試在IE9，IE8，IE7 下的輸出結果

二、window.screen 對象表示一個屏幕，包含用戶屏幕的信息

經過控制檯輸出能夠看到，screen對象共包含6個寬高屬性 width、height、availWidth、availHeight

 

width      返回顯示器屏幕的寬度（單位：像素）

height     返回顯示器屏幕的高度（單位：像素）

availWidth   返回顯示屏幕的可用寬度，除 windows 任務欄以外（單位：像素）

availHeight  返回顯示屏幕的可用高度，除 windows 任務欄以外（單位：像素）

 

三、document 相關的寬高

（1）、clientWidth 和 clientHeight ( 均被四捨五入爲一個整數，若是須要小數，可使用 element.getBoundingClientRect() )

　　　　clientWidth  屬性表示元素的內部寬度（單位：像素）。包括內邊距，但不包括垂直滾動條（若是有），邊框和外邊距

　　　　能夠經過 css width + css padding - 垂直滾動條寬度（若是有）來計算

　　　　clientHeight 屬性是隻讀的，對於沒有定義css或者內聯佈局盒子的元素爲0，不然，它是元素內部的高度（單位：像素）。包括內邊距，但不包括水平滾動條（若是有），邊框和外邊距

　　　　能夠經過 css height + css padding - 水平滾動條高度（若是有）來計算

<!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>
    .box{width: 200px; height: 100px; padding: 15px; background-color:blanchedalmond; border: 2px solid red; overflow: auto;}
  </style>
</head>
<body>
  <div class="box" id="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, voluptate. Deleniti commodi, sapiente earum inventore fuga nulla facere quibusdam unde reiciendis perspiciatis voluptate, sint fugiat aspernatur quidem voluptatem voluptatibus rem?</div>


  <script>
    var box = document.getElementById('box')
    console.log('clientWidth: ' + box.clientWidth)    // clientWidth: 213
    console.log('clientHeight: ' + box.clientHeight)  // clientHeight: 130
  </script>
</body>
</html>

經過控制檯能夠看到 clientWidth 213 = 元素寬度183 + padding 15 * 2，clientHeight 130 = 元素高度100 + padding 15 *2

該屬性在 IE8 如下的瀏覽器中，取值會有些異常

（2）、clientTop 和 clientLeft （能夠理解爲 border 的寬高）

　　　　clientTop  一個元素頂部邊框的寬度（單位：像素），不包括頂部外邊距或內邊距

　　　　clinetLeft 一個元素左邊框的寬度（單位：像素），不包括左內邊距和左外邊距

　　　　若是元素的文本方向是從右向左，而且因爲內容溢出致使左邊出現了一個垂直滾動條，則該屬性包括滾動條的寬度

在上例的基礎上，IE7/IE8 都輸出一樣的值

console.log('clientLeft: ' + box.clientLeft)    // clientLeft: 2
console.log('clientTop: ' + box.clientTop)      // clientTop: 2

 

（3）、offsetWidth 和 offsetHeight  ( 均被四捨五入爲一個整數，若是須要小數，可使用 element.getBoundingClientRect() )

　　　　offsetWidth   返回一個元素的佈局寬度。包括 元素的邊框（border）+ 水平線上的內邊距（padding）+ 垂直方向滾動條寬度（scrollbar）+ css 設置的寬度（width）

　　　　offsetHeight  返回一個元素的像素高度。包括 元素的邊框（border）+ 垂直線上的內邊距（padding）+ 水平方向滾動條高度（scrollbar）+ css 設置的高度（height），不包括 :before, :after 等僞元素的寬高

在上例的基礎上，IE7/IE8 都輸出一樣的值

console.log('offsetWidth: ' + box.offsetWidth)     // offsetWidth: 234
console.log('offsetHeight: ' + box.offsetHeight)   // offsetHeight: 134

 

（4）、offsetParent、offsetLeft 和 offsetTop

　　　　offsetParent  返回一個指向最近的、包含該元素的、定位元素，這裏分兩種狀況

　　　　　　- 當前元素的祖先元素沒有定位，offsetParent 最終是body

　　　　　　- 當前元素的祖先元素定位了，offsetParent 取最近的那個祖先元素　

<!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>
    *{box-sizing: border-box;}
    .box1{width: 350px; height: 350px; padding: 75px; background-color:bisque;}
    .box2{width: 200px; height: 200px; padding: 50px; background-color:aquamarine;}
    .box3{width: 100px; height: 100px; background-color:aliceblue; position: fixed;}
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <div class="box3" id = "box3"></div>
    </div>
  </div>

  <script>
    var box = document.getElementById('box3')
    
    // 父元素 box2 定位
    console.log(box.offsetParent)   // <div class="box2"></div>

    // 父元素 box2 的父元素 box1 定位（box2 沒有定位）
    console.log(box.offsetParent)     // <div class="box1"></div>

    // 全部父元素都沒有定位
    console.log(box.offsetParent)     // <body></body>

    // 該元素或祖先元素 設爲 display: none
    console.log(box.offsetParent)        // webkit, IE11: null, IE10-IE9: <body></body>

    // 該元素的定位方式爲fixed（無論祖先元素是否認位）
    console.log(box.offsetParent)        // 全部IE 均返回 null
  </script>
</body>
</html>

　　　　offsetTop  返回當前元素相對於其 offsetParent 元素的頂部的距離

　　　　offsetLeft  返回當前元素左上角相對於其 offsetParent 元素的左邊界偏移的距離

// box1 定位
console.log('offsetLeft: ' + box.offsetLeft)     // offsetLeft: 125
console.log('offsetTop: ' + box.offsetTop)       // offsetTop: 125

 

（5）、scrollWidth 和 scrollHeight

　　　　scrollWidth 返回元素的內容區域寬度 或 元素的自己的寬度中 更大的那個值。若元素的寬度大於其內容區域（如：存在滾動條時），scrollWidth 要大於 clientWidth

　　　　scrollHeight 等於該元素在不使用滾動條的狀況下爲了適應視口中所用內容所需的最小高度；若沒有垂直滾動條，scrollHeight 與 clientHeight 相同

 

<!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>
    .box{width: 100px; height: 150px; margin: 15px; padding: 15px; background-color: lightgreen; overflow: scroll;}
  </style>
</head>
<body>
  <div class="box" id="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat odit molestias hic, fuga cumque repudiandae labore dignissimos itaque sunt, sint incidunt, minima laborum earum non maiores laudantium? Reiciendis, unde fugiat.</div>

  <script>
    var box = document.getElementById('box')
    console.log('clientWidth: ' + box.clientWidth)
    console.log('clientHeight: ' + box.clientHeight)
    console.log('-------------------------------------------')
    console.log('offsetWidth: ' + box.offsetWidth)
    console.log('offsetHeight: ' + box.offsetHeight)
    console.log('-------------------------------------------')
    console.log('scrollWidth: ' + box.scrollWidth)
    console.log('scrollHeight: ' + box.scrollHeight)
  </script>
</body>
</html>

 

 

（6）、scrollLeft 和 scrollTop （可讀寫，可被設置爲任何整數值）

　　　　scrollLeft  能夠讀取或設置元素滾動條到元素左邊的距離

　　　　　　- 若是元素不能滾動（如：沒有溢出），那麼 scrollLeft 的值是0

　　　　　　- 若是給 scrollLeft 設置的值小於 0，那麼 scrollLeft 的值將變爲0

　　　　　　- 若是給 scrollLeft 設置的值小於元素內容最大的寬度，那麼 scrollLeft 的值將被設爲元素的最大寬度

　　　　scrollTop 能夠獲取或設置一個元素的內容垂直滾動的像素數

　　　　　　- 若是元素沒有垂直方向的滾動條，那麼 scrollTop 的值是0

　　　　　　- 若是 scrollTop 設置的值小於0， 那麼 scrollTop的值將變爲0

　　　　　　- 若是設置超出了這個容器可滾動的值，scrollTop 會被設置爲最大值

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
      #container {
          border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
      }
      #content {
          background-color: #ccc; width: 250px;
      }
  </style>
  <script>
      document.addEventListener('DOMContentLoaded', function () {   
          var button = document.getElementById('slide');
          button.onclick = function () {
              document.getElementById('container').scrollLeft += 20;
          };
      }, false);
  </script>
</head>
<body>
  <div id="container">
      <div id="content">Lorem ipsum dolor sit amet.</div>
  </div>
  <button id="slide" type="button">Slide</button>
</body>
</html>

四、Event 事件對象的座標

clientX和clientY ----> 相對於瀏覽器（可視區左上角0,0）的座標screenX和screenY ----> 相對於設備屏幕左上角的（0,0）的座標offsetX和offsetY ----> 相對於事件源左上角(0,0)的座標pageX和pageY 相對於整個網頁左上角(0,0)的座標X和Y 本是IE屬性，相對於用CSS動態定位的最內容包裹元素

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程