--- title: Determining the dimensions of elements slug: Determining_the_dimensions_of_elements tags: - DOM ---
要素の幅と高さを知るためのプロパティはいくつかあり、本当に求めているプロパティがどれであるかわかりにくいことがあります。このページでは目的に応じてどのプロパティを使用すれば良いか説明します。
表示されているコンテンツ、スクロールバー(あれば)、padding の幅を含む element の占有スペースの総量を知る必要があるならば、offsetWidth
プロパティと offsetHeight
プロパティを利用するのが良いです:
border、margins、スクロールバーを含まない、実際に表示されているコンテンツの padding のみがどれくらいのスペースを取るか知る必要があるならば、 clientWidth
プロパティと clientHeight
プロパティを利用するのが良いです:
現在どのくらい表示されているかに関わらず、コンテンツの実サイズを知る必要があるならば、scrollWidth
プロパティと scrollHeight
プロパティを利用するのが良いです。たとえ現在スクロールバーの使用のために一部分だけが見えているとしても、これらは element の全コンテンツの幅と高さを返します。
たとえば、600×400ピクセルの element が300x300ピクセルのスクロールボックスの中に表示されているならば、scrollHeightは400を、scrollWidthは600を返します。
MSDN: Measuring Element Dimension and Location
{{ languages( {"en": "en/Determining_the_dimensions_of_elements"}) }}