#064
posted on 2022.02.03 (Thu) 2023.04.24 (Mon)

要素の横幅と高さ、位置座標の取得。

CATEGORY

JavaScriptでドキュメント内にある任意の要素の縦横サイズと位置座標を取得する方法。忘れるのでメモ。

 

 

ネイティヴJavaScriptで取得する場合

ライブラリーを使わずにネイティブJavaScript(Vanilla JavaScript)だけで取得する方法。

  1. getBoundingClientRect() : レンダリングされた状態での縦横サイズと「ビューポート」左上が原点の座標を取得。
  2. offsetWidth / offsetHeight : padding、border、スクロールバーを含めた縦横サイズを取得。
  3. offsetLeft / offsetTop : 「offsetParent」左上が原点の座標を取得。
  4. clientWidth / clientHeight : paddingを含めた縦横サイズを取得。
  5. clientLeft / clientTop : 各辺のボーダーの幅を取得。
  6. scrollWidth / scrollHeight : スクロール可能な要素の隠れている部分も含めた全体の縦横サイズを取得。
  7. scrollLeft / scrollTop : 縦横のスクロールしている量を取得。
  8. getComputedStyle() : CSSで指定されている縦横サイズを取得。
  9. naturalWidth / naturalHeight : CSSなどでサイズ変更される前の画像の本来の縦横サイズを取得。

[ ドキュメントのサイズを取得したい場合 ]

ドキュメントの全長(表示しているページの全長)を取得したい場合は、指定要素を「document.documentElement」として、上述のメソッドやプロパティーで取得する。

※ HTML文書の場合、「document.documentElement」は「document」のルート要素である<html>要素を返す。

 

1. getBoundingClientRect()

Elementインターフェイスで実装されているメソッド。

 

要素.getBoundingClientRect() : 指定した要素の「寸法」と、そのビューポートに対する「位置情報」を保持する「DOMRect」オブジェクトを返す。「left」、「top」、「right」、「bottom」、「x」、「y」、「width」、「height」の8つのプロパティーを持つ。

※ 「width」、「height」以外のプロパティーは、「viewport」(ブラウザウィンドウ)の左上を原点にした相対座標をピクセル単位の数値(少数値まで)で返す。

※ 「width」と「 height」プロパティーは、要素が実際にレンダリングされている横幅と高さを返す。(CSSが「width: 100px; transform: scale(0.5);」なら「50」を返す。)

※ ページを縦(または横)にスクロールしている量によって、取得される座標の値は相対的に変化する。
※ ページのスクロール量を加算すれば、ページ内での絶対座標が得られる。(「document」の左上を原点にした座標。)

※ ページのスクロール量は、「window.scrollX」と「window.scrollY」(IE対応なら「pageXOffset」と「pageYOffset」)で取得できる。(Webブラウザ上で「window」オブジェクトはグローバルオブジェクトなので、「window.」は省略できる。)

const foo = document.getElementById('foo');
//DOMRectオブジェクトを取得
const fooRect = foo.getBoundingClientRect();
//横幅を取得
const fooWidth = fooRect.width;
//高さを取得
const fooHeight = fooRect.height;
//ブラウザウィンドウ左上からの相対座標を取得
const fooViewX = fooRect.left;
const fooViewY = fooRect.top;
//ドキュメント左上からの絶対座標を取得
const fooX = fooRect.left + scrollX;
const fooY = fooRect.top + scrollY;

 

2. offsetWidth / offsetHeight

HTMLElementインターフェイスで実装されている読み取り専用のプロパティー。

 

要素.offsetWidth : 指定した要素の外側の横幅寸法をピクセル単位の整数で返す。

要素.offsetHeight : 指定した要素の外側の高さ寸法をピクセル単位の整数で返す。

※ padding、border、スクロールバーを含めるが、marginは含めない。

※ 指定した要素が非表示になるstyleが適用されている場合は、「0」を返す。

const foo = document.getElementById('foo');
//横幅を取得
const fooWidth = foo.offsetWidth;
//高さを取得
const fooHeight = foo.offsetHeight;

 

3. offsetLeft / offsetTop

HTMLElementインターフェイスで実装されている読み取り専用のプロパティー。

 

要素.offsetLeft : 「要素.offsetParent」で取得される要素の左上を原点にした相対的なX座標を返す。

要素.offsetTop : 「要素.offsetParent」で取得される要素の左上を原点にした相対的なY座標を返す。

 

要素.offsetParent : 指定した要素の祖先要素の中で、下記の優先順で該当する直近の祖先要素を返す。

  1. CSSで「position」プロパティーに「absolute」、「relative」、「fixed」のいずれかが指定されている要素。
  2. <td>要素、<th>要素、<table>要素のいずれか。
  3. <body>要素。

※ 下記の場合、「要素.offsetParent」は「null」を返す。

  • 指定した要素(または親要素)に、「display: none」が指定されている。
  • 指定した要素に、「position: fixed」が指定されている。(Firefoxでは<body>要素を返す。)
  • 指定した要素が、<body>要素または<html>要素。
const foo = document.getElementById('foo');
//offsetParentの要素からの相対座標を取得
const fooX = foo.offsetLeft;
const fooY = foo.offsetTop;

 

4. clientWidth / clientHeight

Elementインターフェイスで実装されている読み取り専用のプロパティー。

 

要素.clientWidth : 指定した要素の内側の横幅寸法をピクセル単位の整数で返す。

要素.clientHeight : 指定した要素の内側の高さ寸法をピクセル単位の整数で返す。

※ paddingを含めるが、border、margin、スクロールバーは含めない。

※ インライン要素やCSSのない要素では「0」を返す。

const foo = document.getElementById('foo');
//横幅を取得
const fooWidth = foo.clientWidth;
//高さを取得
const fooHeight = foo.clientHeight;

 

5. clientLeft / clientTop

Elementインターフェイスで実装されている読み取り専用のプロパティー。

 

要素.clientLeft : 指定した要素の左側のボーダーの幅をピクセル単位の整数で返す。

要素.clientTop : 指定した要素の上側のボーダーの幅をピクセル単位の整数で返す。

※ スクロールバーを含めるが、padding、marginは含めない。

 

6. scrollWidth / scrollHeight

Elementインターフェイスで実装されている読み取り専用のプロパティー。

 

要素.scrollWidth : 指定した要素に横スクロールバーが発生している場合、表示領域から横にスクロールアウトされ、見切れて隠れている部分も含めた要素全体の横幅をピクセル単位の整数で返す。

要素.scrollHeight : 指定した要素に縦スクロールバーが発生している場合、表示領域から縦にスクロールアウトされ、見切れて隠れている部分も含めた要素全体の高さをピクセル単位の整数で返す。

※ paddingを含めるがborder、margin、スクロールバーは含めない。

※ CSSで「overflow: scroll;」が指定されていて、内包コンテンツの量により要素にスクロールバーが発生している場合の要素全体の幅を取得したいときに使用する。

※ 指定した要素自身にスクロールが発生していない場合、「要素.clientWidth」、「要素.clientHeight」と同じ値になる。

const foo = document.getElementById('foo');
//横幅を取得
const fooWidth = foo.scrollWidth;
//高さを取得
const fooHeight = foo.scrollHeight;

 

7. scrollLeft / scrollTop

Elementインターフェイスで実装されているプロパティー。

 

要素.scrollLeft : 指定した要素に横スクロールバーが発生している場合、表示領域から横(左)にスクロールアウトされ、表示領域から見切れている部分の横幅を返す。(現在の横スクロールした量を返す。)

要素.scrollTop : 指定した要素に縦スクロールバーが発生している場合、表示領域から縦(上)にスクロールアウトされ、表示領域から見切れている部分の縦幅を返す。(現在の縦スクロールした量を返す。)

※ 要素にスクロールが発生している場合、数値を代入するとスクロール位置が指定した座標に移動する。(「0」を代入するとトップ、「Infinity」を代入するとボトムに移動する。)

※ 要素がスクロールできない場合、または指定値が「0」より小さい値を代入した場合、「0」が設定される。

※ スクロールできる最大値より大きい値を代入した場合、「最大値」が設定される。

※ ページ全体(window)のスクロール量は、「window.scrollX」と「window.scrollY」で取得できる。(IE対応なら「pageXOffset」と「pageYOffset」)

const foo = document.getElementById('foo');
//横スクロール量を取得
const fooScrollX = foo.scrollLeft;
//縦スクロール量を取得
const fooScrollY = foo.scrollTop;

//ページの横スクロール量を取得
const currentX = scrollX;
//ページの縦スクロール量を取得
const currentY = scrollY;

 

 

8. getComputedStyle()

Windowインターフェイスで実装されているメソッド。

 

window.getComputedStyle(要素, 疑似要素) : 指定した要素(または疑似要素)のスタイル情報やスタイルに関するメソッド、プロパティーを保持する「CSSStyleDeclaration」オブジェクトを返す。CSSプロパティーのリアルタイムに更新された計算値のスタイルを取得する。返されたオブジェクトは読み取り専用。

※ 実在する要素を指定する場合は、第2引数の疑似要素に「null」を指定(または第2引数を省略)。

※ 第1引数にテキストノードなど、要素以外を指定した場合はエラーになる。

 

window.getComputedStyle(要素, 疑似要素).width : 指定した要素(または疑似要素)のCSSで指定されている「width」の値を返す。

window.getComputedStyle(要素, 疑似要素).height : 指定した要素(または疑似要素)のCSSで指定されている「height」の値を返す。

※ 計算値を返すか使用値を返すか、スクロールバーを含めるかなど、返す値がOSやブラウザによって異なる可能性があるので注意。

※ 「CSSStyleDeclaration」オブジェクトが持つ「getPropertyValue()」メソッドを使えば、任意のCSSプロパティーの値の取得ができる。(設定されている値をDOMStringで返す。設定されていない場合は空文字を返す。)

const foo = document.getElementById('foo');
const fooCompStyles = window.getComputedStyle(foo);
//横幅を取得
const fooWidth = fooCompStyles.width;
//高さを取得
const fooHeight = fooCompStyles.height;
//フォントサイズを取得
const fooFontSize = fooCompStyles.getPropertyValue('font-size');

 

9. naturalWidth / naturalHeight

HTMLImageElementインターフェイスで実装されている読み取り専用のプロパティー。

 

画像.naturalWidth : 指定した画像の本来の横幅をピクセル単位の整数で返す。

画像.naturalHeight : 指定した画像の本来の高さをピクセル単位の整数で返す。

※ 親要素のサイズやCSSなどによる装飾的なサイズ変更がされていない状態の、本来の画像サイズを返す。

※ ブラウザの機能などによって自動圧縮がされない限り、サーバーによって送られたときの画像サイズが取得される。

const fooImg = document.getElementById('foo');
//横幅を取得
const fooImgWidth = fooImg.naturalWidth;
//高さを取得
const fooImgHeight = fooImg.naturalHeight;

 

 

jQueryで取得する場合

jQueryで取得する方法。

 

1. width() / height()

要素.width() : 指定した要素の横幅を返す。

要素.height() : 指定した要素の高さを返す。

※ padding、border、marginを含めない。

//横幅を取得
const fooWidth = $('#foo').width();
//高さを取得
const fooHeight = $('#foo').height();

 

2. innerWidth() / innerHeight()

要素.innerWidth() : 指定した要素の横幅を返す。

要素.innerHeight() : 指定した要素の高さを返す。

※ paddingを含めるが、border、marginは含めない。

//横幅を取得
const fooWidth = $('#foo').innerWidth();
//高さを取得
const fooHeight = $('#foo').innerHeight();

 

3. outerWidth() / outerHeight()

要素.outerWidth() : 指定した要素の横幅を返す。

要素.outerHeight() : 指定した要素の高さを返す。

※ padding、borderを含めるが、marginは含めない。

//横幅を取得
const fooWidth = $('#foo').outerWidth();
//高さを取得
const fooHeight = $('#foo').outerHeight();

 

4. outerWidth(true) / outerHeight(true)

要素.innerWidth(true) : 指定した要素の横幅を返す。

要素.innerHeight(true) : 指定した要素の高さを返す。

※ padding、border、marginを含める。

//横幅を取得
const fooWidth = $('#foo').outerWidth(true);
//高さを取得
const fooHeight = $('#foo').outerHeight(true);

 

5. offset()

要素.offset() : 指定した要素の位置情報の「letf」、「top」プロパティー(「document」の左上を原点にしたページ内での絶対座標)を保持するオブジェクトを返す。引数で数値を設定すれば、要素を任意の位置座標に移動できる。

※ CSSで「visibility: hidden;」指定の要素の座標は取得できるが、「display: none;」指定はレンダリングツリーから除外されるため「undefined」になる。

//ドキュメント左上からの絶対座標を取得
const fooX = $('#foo').offset().left;
const fooY = $('#foo').offset().top;
//ページ内の「100px, 100px」の位置座標に要素を移動
$('#foo').offset({top: 100, left: 100});

 

6. position()

要素.position() : 指定した要素の位置情報の「letf」、「top」プロパティー(親要素からの相対的な座標)を保持するオブジェクトを返す。

※ CSSで「visibility: hidden;」指定の要素の座標は取得できるが、「display: none;」指定はレンダリングツリーから除外されるため「undefined」になる。

※ 数値を代入しての位置変更はできない。

//親要素左上からの相対座標を取得
const fooX = $('#foo').position().left;
const fooY = $('#foo').position().top;

 

7. scrollLeft / scrollTop

要素.scrollLeft() : 指定した要素に横スクロールバーが発生している場合、表示領域から横にスクロールアウトされ、表示領域から見切れている部分の横幅を返す。(現在の横スクロールしている量を返す。)

要素.scrollTop() : 指定した要素に縦スクロールバーが発生している場合、表示領域から横にスクロールアウトされ、表示領域から見切れている部分の横幅を返す。(現在の縦スクロールしている量を返す。)

※ 引数に数値を指定すれば、任意のスクロール量を設定できる。

※ 要素に「$(window)」を指定すれば、ページ自体のスクロール量を取得、設定できる。

//現在のスクロール量を取得
const fooScrollX = $('#foo').scrollLeft();
const fooScrollY = $('#foo').scrollTop();
//スクロールを100pxの位置に移動
$('#foo').scrollLeft(100);
$('#foo').scrollTop(100);

 

 

Share この記事をシェア
この記事のURL

https://memo.ag2works.tokyo/post-3968/

Copyコピー
この記事のタイトル

要素の横幅と高さ、位置座標の取得。 | memo メモ [AG2WORKS]

Copyコピー
この記事のリンクタグ

<a href="https://memo.ag2works.tokyo/post-3968/" target="_blank" rel="noopener">要素の横幅と高さ、位置座標の取得。 | memo メモ [AG2WORKS]</a>

Copyコピー
※ フィールドをクリックでコピーするテキストの編集ができます。

関連がありそうな記事

この記事へのコメント

コメントの書き込みはまだありません。

  • コメント内のタグはエスケープ処理され、文字列として出力されます。
  • セキュリティーのため、投稿者のIPアドレスは取得されます。
  • 管理者が内容を不適切と判断したコメントは削除されます。
  • このフォームにはスパム対策として、Googleの提供するreCAPTCHAシステムが導入されています。
    (Google Privacy Policy and Terms of Service.)