HTML 要素の高さ、offsetHeight、clientHeight、scrollTop などの詳細な説明。

要素に関するいくつかの属性

フロントエンドの日常的な開発では、一部のページのプロパティを取得または監視する必要が頻繁に発生するため、これらのプロパティをより適切に使用するには、一部のプロパティの意味を理解する必要があります。特に、次のとおりです。

• サイズ関連: offsetHeight、clientHeight、scrollHeight;
• オフセット関連: offsetTop、clientTop、scrollTop、pageYOffset、scrollY;
• 相対的なビューポートの位置を取得します: Element.getBoundingClientRect();
• 要素のスタイル オブジェクトを取得します: Window.getComputedStyle(Element);

属性の定義

サイズ関連の属性定義について:

offsetHeight: Element.offsetHeight は、要素の高さの px 値を返す読み取り専用プロパティです。これは整数値であり、小数点はありません。

• 非表示の要素は 0 を返します。
• その他は、要素の innerHeight + padding + border + margin + scrollbar を返しますが、内部の ::before または ::after 疑似要素は含まれません。

clientHeight: Element.clientHeight は、要素の高さの px 値を返す読み取り専用プロパティです。これは整数値であり、小数点はありません。

• スタイルが設定されていないインライン要素の場合、返される値は 0 になります。
• html 要素または Quirks モードの body の場合、返される値はビューポートの高さ、つまりページ ビューポート全体の高さになります。
• その他の場合: 境界線、余白、スクロールバーを除いた要素の innerHeight + パディング。

scrollHeight: は読み取り専用プロパティです。要素の高さの px 値を返します。小数点なしの整数値です。

• 子要素がスクロールしない場合は、Element.clientHeightと同じになります。
• 子要素がスクロール可能な場合は、すべての子要素の clientHeight の高さの合計 + それぞれのパディングになります。

window.innerHeight: (ブラウザウィンドウの高さ、ツールバー、メニューなどを除いた、表示領域DOMの高さのみ)
window.outerHeight: (ブラウザウィンドウの高さ、ツールバー、メニューなどを含む、ブラウザ全体の高さ)

オフセットについて:

offsetTop: 最も近い相対的に配置された親要素の内側の端からの要素の上の距離を返す読み取り専用プロパティ。実際の使用では、異なるスタイルによって相対的に配置された親要素が一貫していないために互換性の問題が発生する可能性があります。
clientTop: 上側の境界線の幅
スクロールトップ：

• スクロール要素の場合、これはスクロールされた距離です。
• HTMLの場合はwindow.scrollYです。

window.scrollY、別名: window.pageYOffset、ルートノードが垂直方向にスクロールした距離

開発に必要な関連データ

ページ全体の表示領域の高さを取得します。[表示領域外の高さは不要]

定数高さ = window.innerHeight
    || ドキュメント.documentElement.クライアント高さ
    || ドキュメント本体のクライアントの高さ;

ページ全体の高さを取得します: [表示領域の外側も含む]

定数高さ = document.documentElement.offsetHeight
    || ドキュメント本体のオフセット高さ;

ページ全体の垂直スクロールの高さを取得します。

定数 scrollTop = document.documentElement.scrollTop
    || ドキュメント本体の先頭をスクロールします。

ルート ノードの上部を基準とした要素の距離を取得します。

// ルートノードに対して相対的に配置された要素の場合、const top = Element.offsetTop;

// ルートノードに対して相対的に配置されていない要素の場合は、getElementTop(element) にループする必要があります。
      実際のトップを要素.オフセットトップとします
      現在の要素を要素.offsetParentとする

      while (current !== null) {
        実際のトップ += 現在のオフセットのトップ
        現在の = 現在のオフセット親
      }
      実際のトップを返す
}

// 別の方法は、スクロール距離 + ビューポートの上余白からの距離です。const top = Element.getBoundingClientRect().top + window.scrollY;

表示領域に対する要素の上部の距離を取得します。

定数 top = Element.getBoundingClientRect().top;

ページ全体の垂直スクロール位置を設定します。

const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
(CSS1Compat) の場合 {
    ドキュメントのスクロールトップ = 100;
} それ以外 {
    ドキュメントのスクロールトップ = 100;
}

HTML 要素の height、offsetHeight、clientHeight、scrollTop などの詳細説明はこれで終わりです。height、offsetHeight、clientHeight、scrollTop に関するより関連性の高い内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。