HTML
<div id="rect1">
<div id="rect2"></div>
</div>
CSS
<style>
#rect1 {
width:100px;
height:100px;
margin:5px;
border: solid 1px Crimson;
padding:5px;
overflow:auto;
background-color:LightCoral;
}
#rect2 {
width:160px;
height:160px;
padding:4px;
margin-left:3px;
margin-right:4px;
margin-top:6px;
margin-bottome:7px;
border: solid 1px LimeGreen;
overflow:auto;
background-color:LightGreen;
}
</style>
rect1
| メソッド | 記述例 | 値 | 説明 |
|---|---|---|---|
| width() | $('#rect1').width(); |
jQueryの関数。jQueryの関数。paddingとborderの幅を除外した幅を取得する。幅＝width(100px) - padding(5px × 2) - border(1px × 2) |
|
| height() | $('#rect1').height(); |
上記と同様幅＝height(100px) - padding(5px × 2) - border(1px × 2) |
|
| outerWidth() | $('#rect1').outerWidth(); | jQueryの関数。paddingとborderを含めた横幅を取得。marginは無視。位置や幅の計算処理を行いたい場合、この関数を使うことが多い。 | |
| outerHeight() | $('#rect1').outerHeight(); | 上記と同様 | |
| clientWidth | $('#rect1')[0].clientWidth; |
標準関数。スクロールバーの太さを含めた幅を取得する。スクロールバーの太さはブラウザごとに異なるので注意する。幅 = width(100px) - スクロールバーの太さ（17px※) - border(1px × 2)※スクロールバーの太さはChrome,FireFoxの場合17px、Operaは15px,Edgeは16pxである。 |
|
| clientHeight | $('#rect1')[0].clientHeight; | 上記と同様 | |
| scrollWidth | $('#rect1')[0].scrollWidth; |
標準関数。基本的に子要素の幅を取得する。スクロール制御を行いたいときに利用する関数。幅 ＝ rect2のouterWidth(160px) + rect2のmargin-left(3px) + padding(5px) |
|
| scrollHeight | $('#rect1')[0].scrollHeight; |
標準関数。基本的に子要素の幅を取得する。ブラウザごとに異なるので注意。 ChromeとOperaの場合 幅＝rect2のouterWidth(160px) + rect2のmargin-top(6px) + padding(5px × 2) FireFoxとEdgeの場合 幅＝rect2のouterWidth(160px) + rect2のmargin-top(6px) + padding(5px) |
rect2
| メソッド | 記述例 | 値 | 検証 |
|---|---|---|---|
| width() | $('#rect2').width(); | width(160x) - padding(4px × 2) - border(1px × 2) | |
| height() | $('#rect2').height(); | height(160px) - padding(4px × 2) - border(1px × 2) | |
| outerWidth() | $('#rect2').outerWidth(); | width(160px) | |
| outerHeight() | $('#rect2').outerHeight(); | height(160px) | |
| clientWidth | $('#rect2')[0].clientWidth; | width(160x) - border(1px × 2) | |
| clientHeight | $('#rect2')[0].clientHeight; | width(160x) - border(1px × 2) | |
| scrollWidth | $('#rect2')[0].scrollWidth; | width(160x) - border(1px × 2) | |
| scrollHeight | $('#rect2')[0].scrollHeight; | width(160x) - border(1px × 2) |