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(); | width(100px) - padding(5px × 2) - border(1px × 2) | jQueryの関数 | |
| height() | $('#rect1').height(); | height(100px) - padding(5px × 2) - border(1px × 2) | jQueryの関数 | |
| outerWidth() | $('#rect1').outerWidth(); | width(100px) | jQueryの関数 | |
| outerHeight() | $('#rect1').outerHeight(); | height(100px) | jQueryの関数 | |
| clientWidth | $('#rect1')[0].clientWidth; |
Chrome,FireFoxの場合 width(100px) - スクロールバーの太さ（17px※) - border(1px × 2) ※スクロールバーの太さはOpera 15px,Edge 16pxである。 |
標準関数 | |
| clientHeight | $('#rect1')[0].clientHeight; |
Chrome,FireFoxの場合 height(100px) - スクロールバーの太さ（17px※) - border(1px × 2) ※スクロールバーの太さはOpera 15px,Edge 16pxである。 |
標準関数 | |
| 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) | jQueryの関数 | |
| height() | $('#rect2').height(); | height(160px) - padding(4px × 2) - border(1px × 2) | jQueryの関数 | |
| outerWidth() | $('#rect2').outerWidth(); | width(160px) | jQueryの関数 | |
| outerHeight() | $('#rect2').outerHeight(); | height(160px) | jQueryの関数 | |
| clientWidth | $('#rect2')[0].clientWidth; | width(100px) - スクロールバーの太さ（Chrome,FFは17px) - border(1px × 2) | 標準関数 | |
| clientHeight | $('#rect2')[0].clientHeight; |
Chromeの場合→ height(100px) - スクロールバーの太さ（Chromeは17px) - border(1px × 2) FireFoxの場合→ height(100px) - スクロールバーの太さ（FireFoxは16px) - border(1px × 2) |
標準関数 | |
| scrollWidth | $('#rect2')[0].scrollWidth; | xxx | 標準関数 | |
| scrollHeight | $('#rect2')[0].scrollHeight; | xxx | 標準関数 |