1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTML要素の高さ、offsetHeight、clientHeight、scrollTopなどについて説明します。

2022-01-07 20:51:03

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

日々のフロントエンド開発では、どうしてもページのプロパティを取得したり聞いたりする必要があることが多いので、よりよく使うためには、それらの一部が何を表しているかを常に理解する必要があります。具体的には、以下のようなものがあります。

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

属性の定義

サイズに関する属性の定義について。

offsetHeight: Element.offsetHeight は読み取り専用のプロパティで、要素に対応する高さ px の値を小数点以下の整数値で返します。

  • は、hidden 要素の場合、0 を返します。
  • その他は、要素の innerHeight + padding + border + margin + scrollbar; を返しますが、内部の ::before や ::after 疑似要素には適用されません。

clientHeight: Element.clientHeightは読み取り専用のプロパティで、要素に対応する高さ(px)の値を小数点以下の整数値で返します。

  • は、スタイルが設定されていない要素やインラインの要素に対しては0を返します。
  • 変なモードのhtml要素やbodyの場合、ページ全体のビューポートの高さが返されます
  • その他の場合:要素のinnerHeight + padding。ボーダー、マージン、スクロールバーは除く。

scrollHeight: は読み取り専用のプロパティで、要素に対応する高さ(px)の値を小数点以下の整数値で返します。

  • 子要素のスクロールが存在しない場合の Element.clientHeight と同じ。
  • 子要素にスクロールがある場合、子要素のclientHeightの高さと自身のpaddingの合計になります。

window.innerHeight:(ブラウザウィンドウの高さ、ツールバーやメニューなどは含まず、可視領域domの高さのみ)。
window.outerHeight:(ツールバー、メニューなどを含むブラウザウィンドウの高さ、ブラウザ全体の高さです。)

オフセットについて

offsetTop: 読み取り専用のプロパティで、最も近い相対的に配置された親要素の内側マージンからの要素の上部の距離を返す。実際には、異なるスタイルによって引き起こされる、相対的に配置された親要素の一貫性のない互換性の問題があるかもしれません。
clientTop: 上部ボーダーの幅
scrollTopを指定します。

  • スクロール要素では、スクロールした距離、つまり
  • htmlの場合は、window.scrollYです。

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

開発時に必要な関連データ

ページ全体の可視領域の高さを取得します。[可視領域外の高さなし

package live.every.day.Programming;

import java.util.ArrayList;
import java.util.Arrays;

/**
 * Given an array nums containing n integers, determine if there are three elements a, b, and c in nums such that a+b+c=0.
 * Find all triples that satisfy the condition and do not duplicate.
 *
 * @author Created by LiveEveryDay
 */
public class ThreeNumbersSumEqualsZero {

    public static ArrayList<ArrayList<Integer>> solve(int[] nums) {

        // triples are represented by ArrayList<Integer>
        ArrayList<ArrayList<Integer>> result = new ArrayList<>();

        if (nums == null || nums.length == 0) {
            return result;
        }

        // Sort
        Arrays.sort(nums);

        for (int i = 0; i < nums.length - 2; i++) {

            // Avoid counting duplicate elements
            if (i ! = 0 && nums[i] == nums[i - 1]) {
                continue;
            }

            /**
             * Fix a number and select two numbers from the ones that follow.
             * Because arrays are ordered, you can use two array subscripts left and right, with left pointing to the last position of the current element and right pointing to the last position of the array.
             * The sum of three numbers is added to the solution set when it equals 0.
             * If the sum of three numbers is less than 0, move left to the right.
             * If the sum of three numbers is greater than 0, move right to the left.
             */
            int left = i + 1;
            int right = nums.length - 1;
            while (left < right) {
                int sum = nums[i] + nums[left] + nums[right];
                if (sum == 0) {
                    ArrayList<Integer> r = new ArrayList<>();
                    r.add(nums[i]);
                    r.add(nums[left]);
                    r.add(nums[right]);
                    result.add(r);
                    left++;
                    right--;

                    // Avoid counting duplicate elements
                    while (left < right && nums[left] == nums[left - 1]) {
                        left++;
                    }

                    // Avoid counting duplicate elements
                    while (left < right && nums[right] == nums[right + 1]) {
                        right --;
                    }
                } else if (sum < 0) {
                    left++;
                } else {
                    right--;
                }
            }
        }
        return result;
    }

    public static void main(String[] args) {
        int[] nums1 = {-1, 0, 1, 2, -1, -4};
        System.out.println(solve(nums1));

        int[] nums2 = {0};
        System.out.println(solve(nums2));

        int[] nums3 = {1, 2, 3, 4, 5, 6};
        System.out.println(solve(nums3));
    }

}

// Output:
/*
[[-1, -1, 2], [-1, 0, 1]]
[]
[]
*/

ページ全体の高さを取得します。[可視領域外も含む

const height = document.documentElement.offsetHeight
    || document.body.offsetHeight;


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

const scrollTop = document.documentElement.scrollTop
    || document.body.scrollTop;


ルートノードの先頭からの相対的な要素の距離を取得します。

// For elements positioned relative to the root node
const top = Element.offsetTop;

// For elements that are not positioned relative to the root node, you need to loop through them
getElementTop(element) {
      let actualTop = element.offsetTop
      let current = element.offsetParent

      while (current ! == null) {
        actualTop += current.offsetTop
        current = current.offsetParent
      }
      return actualTop
}

// There is another way to scroll distance + distance from the top margin of the viewport
const top = Element.getBoundingClientRect().top + window.scrollY.


可視領域の上端からの相対的な要素の距離を取得します。

const top = Element.getBoundingClientRect().top;


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

const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
if (isCSS1Compat) {
    document.documentElement.scrollTop = 100;
} else {
    document.body.scrollTop = 100;
}



HTML要素のheight, offsetHeight, clientHeight, scrollTopなどに関するこの記事は以上です、より関連するheight, offsetHeight, clientHeight, scrollTopの内容は、スクリプトハウスの過去記事を検索してください。または、以下の関連記事を引き続き閲覧して、今後ともスクリプトの家をより一層応援してくださいね。