DOM と BOM のさまざまな位置とサイズのプロパティを基本的に理解する

「ナゲッツ・スターティングプラン」に参加中です

序章

フロントエンドの初心者の多くは、DOM と BOM の位置とサイズの属性に混乱したり、悩まされたりしたことがあると思います。これらはフロントエンド開発で最も一般的に使用される概念の 1 つですが、プロパティが異なれば、用途や計算方法も大きく異なります。この記事では、DOM と BOM の位置とサイズのプロパティを詳しく掘り下げ、初心者にはより包括的な理解を提供し、上級者には復習と学習の機会を提供します。

1. DOM 内の位置とサイズの属性

DOMとはJavaScriptがWebページを操作するためのインターフェースであり、正式名称は「Document Object Model」です。その機能は、Web ページを JavaScript オブジェクトに変換し、さまざまな操作 (コンテンツの追加や削除など) をスクリプトで実行できるようにすることです。DOM に位置属性とサイズ属性を導入しましょう。

1.1 offset 家族

概要は次のとおりです。

• 要素.オフセット親

要素のoffsetParentプロパティは現在の要素に最も近く、CSSpositionプロパティが等しくないstatic親要素を返します。注: すべての要素には、静的なデフォルトの位置属性があります (別の属性値に設定されていない限り)。

 
<div style="position: absolute;">
  <p>
    <span>我是准备获取 offsetParent 属性的子元素 span </span>
  </p>
</div>

上の例では、span要素のoffsetParent属性はdiv要素です。要素のすべての上位ノードの属性がpositionである場合static、offsetParentその属性はbody要素であることに注意してください。

次の場合、offsetParent 属性値は null を返します。

0. 要素が非表示の場合 (display:none の設定など)、offsetParent は null を返します。
1. 要素の style 属性のposition 属性が固定されている場合 (この時点では参照要素がない場合)、offsetParent は null を返します。

• 要素.オフセット左，要素.オフセット上

有了 offsetParent 的前置知识，offsetLeft 和 offsetTop 就比较好理解了，Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，返回的值为整数类型，单位为像素。

下面两种情况需要注意：

0. 若元素的 style 属性中的 position 属性为 fixed（此时没有参考元素），offsetLeft 表示元素左侧边缘与 viewport（视口）左侧边缘之间的距离。
1. 如果元素处于一个文档流中的隐藏或不可见祖先元素中，则offsetLeft将返回0。

• Element.offsetHeight，Element.offsetWidth

offsetHeight: 返回元素的高度，包括padding、border和可选的水平滚动条的高度。也就是说，它返回的值是元素边框框起来的高度（包括边框宽度和padding），而不包括margin区域和滚动条外的空白区域。

offsetWidth: 返回元素的宽度，其他性质和 offsetHeight 相同。

需要注意的是，这些属性返回的值是整数，不包括小数。这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如display: none;），则返回0。

1.2 client 家族

先来张概览图：

• Element.clientHeight，Element.clientWidth

clientHeight：返回一个整数值，表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。除了元素本身的高度，它还包括padding部分，但是不包括border、margin、水平滚动条的高度（如果存在）。

document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话）。document.body的高度则是网页的实际高度。一般来说，document.body.clientHeight大于document.documentElement.clientHeight。

clientWidth：和 clientHeight 一样，同样只对块级元素有效，也是只包括元素本身的宽度和padding。

• Element.clientLeft，Element.clientTop

clientLeft: 返回元素左侧边框的宽度，即border-left的宽度。它不包括内边距(padding)和外边距(margin)的尺寸，也不包括元素的内容区域。

clientTop: 返回元素顶部边框的宽度，即border-top的宽度。它不包括内边距(padding)和外边距(margin)的尺寸，也不包括元素的内容区域。

注意，这两个属性的值始终是整数。

下面几种情况下，clientLeft和clientTop的值为0：

0. 如果元素的边框样式为none。
1. 如果元素被隐藏（例如通过CSS中的display:none属性或visibility:hidden属性）。
2. 如果元素是行内元素（display: inline）。

1.3 scroll 家族

上图先：

• Element.scrollHeight，Element.scrollWidth

scrollHeight：返回元素内容区域的完整高度（返回一个整数值，单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。

scrollWidth：返回元素内容区域的完整宽度，其他地方都与scrollHeight属性类似。

这两个属性只读。注意，即使父盒子设置了 overflow: hidden; 隐藏了移出的内容，用 scrollHeight 或 scrollWidth 仍然能返回元素的总高度。

整张网页的总高度可以从document.documentElement或document.body上读取。

 
document.documentElement.scrollHeight
document.body.scrollHeight

• Element.scrollLeft，Element.scrollTop

scrollLeft：返回元素内容区域在水平方向上滚动的像素值。可以设置该属性的值以强制元素滚动到指定的像素位置。当没有水平滚动条时，它的值为0。

scrollTop: 返回元素内容区域在垂直方向上滚动的像素值。可以设置该属性的值为强制元素滚动到指定的像素位置。当没有垂直滚动条时，它的值为0。

这两个属性都可读写，设置该属性的值，会导致浏览器将当前元素自动滚动到相应的位置。

如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。

 
document.documentElement.scrollLeft
document.documentElement.scrollTop

2. BOM中的位置和大小属性

BOM（浏览器对象模型）指的是Web浏览器提供的一组对象，用于控制浏览器窗口的外观和行为，并且可以访问浏览器本身的信息。下面就介绍一下 BOM 中的位置和大小属性。

上图先：

• window.screenX，window.screenY

  window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。

• window.innerHeight，window.innerWidth

  window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。

  用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变（比如宽度还是960像素），只是每个像素占据的屏幕空间变大了，因此可见部分（视口）就变小了。

  注意，这两个属性值包括滚动条的高度和宽度。

• window.outerHeight，window.outerWidth

  window.outerHeightプロパティはwindow.outerWidth、ブラウザ メニューと境界線 (ピクセル単位) を含む、ブラウザ ウィンドウの高さと幅を返します。これら 2 つのプロパティは読み取り専用です。

• window.scrollX、window.scrollY

  window.scrollXこのプロパティは、ページの水平スクロール距離とwindow.scrollYページの垂直スクロール距離をどちらもピクセル単位で返します。これら 2 つのプロパティは読み取り専用です。

• window.pageXOffset，window.pageYOffset

  window.pageXOffset属性とwindow.pageYOffset属性、アレwindow.scrollXとwindow.scrollYエイリアス。

• window.Screen.height，window.Screen.width

  ブラウザ ウィンドウが存在する画面の高さと幅 (ピクセル単位)。この値は一定とみなされ、モニターの解像度が調整されない限り変化しません。モニターの解像度はブラウザーの設定とは関係がなく、Web ページをズームしても解像度は変わりません。

  ​

歴史的な記事:

フロントエンドのメモリ リークを見つけて修正するにはどうすればよいですか? - 詳細なトラブルシューティングと分析のスキル

Vue ベースの Drawer コンポーネントを最初から実装する

Vue ベースの MessageBox コンポーネントを最初から実装する

参考文献:

wangdoc.com/javascript/…