【jQuery】横幅と高さを取得する方法/width()・height()
jQueryを使用して要素の横幅や高さを取得するメソッドはいくつも存在しています。
使用するメソッドによって取得出来る値は変わってきます。
この記事ではjQueryを使用して要素の横幅や高さを取得する方法をご紹介します。
サンプルコードは以下のHTMLとCSSをもとにどんな値が取得出来るのか見ていきます。
<div id="box">
<div id="result"></div>
</div>
#box{
width: 400px;
height: 50px;
padding: 15px;
border: 15px solid #eee;
margin: 15px;
background: #ccc;
}
#result{
width: 100%;
height: 100%;
font-size: 14px;
background: #aaa;
display: flex;
align-items: center;
justify-content: center;
}
この記事の目次を表示
横幅を取得する方法
jQueryで要素の横幅を取得するには以下のメソッドを使用することで取得することが出来ます。
- width();
- innerWidth();
- outerWidth();
- outerWidth(true);
どれも要素の横幅を取得するためのメソッドですが取得出来る値は異なります。
それぞれ何を含む横幅なのかしっかり把握する必要があります。
width()メソッドで取得する方法
width();
メソッドを使用することで要素の横幅を取得することが出来ます。
取得出来る横幅は要素のみで「padding」や「border」、「margin」の値を除いた値です
値 | 取得 |
---|---|
要素の横幅 | 〇 |
padding | × |
border | × |
margin | × |
$(window).on('load',function(){
let box_width = $('#box').width();
$('#result').text("width()メソッドで取得出来る横幅は「" + box_width + "」です。");
});
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
innerWidth()メソッドで取得するする方法
innerWidth();
メソッドを使用することで要素の横幅を取得することが出来ます。
取得出来る横幅は要素と「padding」を含む値です。
値 | 取得 |
---|---|
要素の横幅 | 〇 |
padding | 〇 |
border | × |
margin | × |
$(window).on('load',function(){
let box_width = $('#box').innerWidth();
$('#result').text("innerWidth()メソッドで取得出来る横幅は「" + box_width + "」です。");
});
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
outerWidth()メソッドで取得する方法
outerWidth();
メソッドを使用することで要素の横幅を取得することが出来ます。
取得出来る横幅は要素と「padding」と「border」を含む値です。
値 | 取得 |
---|---|
要素の横幅 | 〇 |
padding | 〇 |
border | 〇 |
margin | × |
$(window).on('load',function(){
let box_width = $('#box').outerWidth();
$('#result').text("outerWidth()メソッドで取得出来る横幅は「" + box_width + "」です。");
});
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
outerWidth(true)メソッドで取得する方法
outerWidth();
メソッドに引数としてtrue
を渡して使用することで要素の横幅を取得することが出来ます。
取得出来る横幅は要素と「padding」と「border」、さらに「margin」を含む値です。
値 | 取得 |
---|---|
要素の横幅 | 〇 |
padding | 〇 |
border | 〇 |
margin | 〇 |
$(window).on('load',function(){
let box_width = $('#box').outerWidth(true);
$('#result').text("outerWidth(true)メソッドで取得出来る横幅は「" + box_width + "」です。");
});
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
高さを取得する方法
jQueryで要素の高さを取得するには以下のメソッドを使用することで取得することが出来ます。
- height();
- innerHeight();
- outerHeight();
- outerHeight(true);
どれも要素の高さを取得するためのメソッドですが取得出来る値は異なります。
それぞれ何を含む高さなのかしっかり把握する必要があります。
height()メソッドで取得する方法
height();
メソッドを使用することで要素の高さを取得することが出来ます。
取得出来る高さは要素のみで「padding」や「border」、「margin」の値を除いた値です。
値 | 取得 |
---|---|
要素の高さ | 〇 |
padding | × |
border | × |
margin | × |
$(window).on('load',function(){
let box_height = $('#box').height();
$('#result').text("height()メソッドで取得出来る高さは「" + box_height + "」です。");
});
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
innerHeight()メソッドで取得する方法
innerHeight();
メソッドを使用することで要素の高さを取得することが出来ます。
取得出来る高さは要素と「padding」を含む値です。
値 | 取得 |
---|---|
要素の高さ | 〇 |
padding | 〇 |
border | × |
margin | × |
$(window).on('load',function(){
let box_height = $('#box').innerHeight();
$('#result').text("innerHeight()メソッドで取得出来る高さは「" + box_height + "」です。");
});
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
outerHeight()メソッドで取得する方法
outerHeight();
メソッドを使用することで要素の高さを取得することが出来ます。
取得出来る高さは要素と「padding」と「border」を含む値です。
値 | 取得 |
---|---|
要素の高さ | 〇 |
padding | 〇 |
border | 〇 |
margin | × |
$(window).on('load',function(){
let box_height = $('#box').outerHeight();
$('#result').text("outerHeight()メソッドで取得出来る高さは「" + box_height + "」です。");
});
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
outerHeight(true)メソッドで取得する方法
outerHeight();
メソッドに引数としてtrue
を渡して使用することで要素の高さを取得することが出来ます。
取得出来る高さは要素と「padding」と「border」、さらに「margin」を含む値です。
値 | 取得 |
---|---|
要素の高さ | 〇 |
padding | 〇 |
border | 〇 |
margin | 〇 |
$(window).on('load',function(){
let box_height = $('#box').outerHeight(true);
$('#result').text("outerHeight(true)メソッドで取得出来る高さは「" + box_height + "」です。");
});
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめて確認
最後に全てをまとめて確認してみましょう。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめ
いかがでしたか?
横幅と高さは要素に何を含むかによって値は変わってきます。
自分が使いたい要素は何を含むのかしっかり把握して適切なメソッドを使用していきたいですね。