files/ja/determining_the_dimensions_of_elements/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

---
title: Determining the dimensions of elements
slug: Determining_the_dimensions_of_elements
tags:
  - DOM
---
<p><span class="CRHTML_TXN"><span id="eq00000g00003">要素の幅と高さを知るためのプロパティはいくつかあり、本当に求めているプロパティがどれであるかわかりにくいことがあります。このページでは目的に応じてどのプロパティを使用すれば良いか説明します。</span></span></p>

<h3 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">表示に使用されている領域の大きさはどのくらいか？</h3>

<p>表示されているコンテンツ、スクロールバー(あれば)、padding の幅を含む element の占有スペースの総量を知る必要があるならば、<code><a href="/ja/DOM/element.offsetWidth" title="ja/DOM/element.offsetWidth">offsetWidth</a></code> プロパティと <code><a href="/ja/DOM/element.offsetHeight" title="ja/DOM/element.offsetHeight">offsetHeight</a></code> プロパティを利用するのが良いです:</p>

<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>

<h3 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">表示されているコンテンツのサイズは何か?</h3>

<p>border、margins、スクロールバーを含まない、実際に表示されているコンテンツの padding のみがどれくらいのスペースを取るか知る必要があるならば、 <code><a href="/ja/DOM/element.clientWidth" title="ja/DOM/element.clientWidth">clientWidth</a></code> プロパティと <code><a href="/ja/DOM/element.clientHeight" title="ja/DOM/element.clientHeight">clientHeight</a></code> プロパティを利用するのが良いです:</p>

<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>

<h3 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">コンテンツの大きさはどのくらいか?</h3>

<p>現在どのくらい表示されているかに関わらず、コンテンツの実サイズを知る必要があるならば、<code><a href="/ja/DOM/element.scrollWidth" title="ja/DOM/element.scrollWidth">scrollWidth</a></code> プロパティと <code><a href="/ja/DOM/element.scrollHeight" title="ja/DOM/element.scrollHeight">scrollHeight</a></code> プロパティを利用するのが良いです。たとえ現在スクロールバーの使用のために一部分だけが見えているとしても、これらは element の全コンテンツの幅と高さを返します。</p>

<p>たとえば、600×400ピクセルの element が300x300ピクセルのスクロールボックスの中に表示されているならば、scrollHeightは400を、scrollWidthは600を返します。</p>

<h3 id="References" name="References">リファレンス</h3>

<p><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></p>

<p>{{ languages( {"en": "en/Determining_the_dimensions_of_elements"}) }}</p>