【jQuery】指定した要素の幅や高さを取得する方法

Web開発では、特定の要素の幅や高さを取得することがよくあります。jQueryを使用すると、これを簡単に実現できます。この記事では、jQueryを使った要素の幅や高さの取得方法を詳しく解説します。

幅を取得する方法
高さを取得する方法
具体例
まとめ

幅を取得する方法

width()メソッド

要素の内容の幅（パディングやボーダーを含まない）を取得します。

var elementWidth = $('#elementId').width();

innerWidth()メソッド

要素の内容とパディングの幅を取得します。

var elementInnerWidth = $('#elementId').innerWidth();

outerWidth()メソッド

要素の内容、パディング、ボーダーの幅を取得します。引数にtrueを渡すとマージンも含めて取得します。

var elementOuterWidth = $('#elementId').outerWidth();
var elementOuterWidthWithMargin = $('#elementId').outerWidth(true);

高さを取得する方法

height()メソッド

要素の内容の高さ（パディングやボーダーを含まない）を取得します。

var elementHeight = $('#elementId').height();

innerHeight()メソッド

要素の内容とパディングの高さを取得します。

var elementInnerHeight = $('#elementId').innerHeight();

outerHeight()メソッド

要素の内容、パディング、ボーダーの高さを取得します。引数にtrueを渡すとマージンも含めて取得します。

var elementOuterHeight = $('#elementId').outerHeight();
var elementOuterHeightWithMargin = $('#elementId').outerHeight(true);

具体例

以下のHTMLとjQueryのコードを使用して、#myElementの幅と高さを取得する例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueryでの幅と高さの取得</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var width = $('#myElement').width();
            var innerWidth = $('#myElement').innerWidth();
            var outerWidth = $('#myElement').outerWidth();
            var outerWidthWithMargin = $('#myElement').outerWidth(true);

            var height = $('#myElement').height();
            var innerHeight = $('#myElement').innerHeight();
            var outerHeight = $('#myElement').outerHeight();
            var outerHeightWithMargin = $('#myElement').outerHeight(true);

            console.log('Width: ' + width);
            console.log('Inner Width: ' + innerWidth);
            console.log('Outer Width: ' + outerWidth);
            console.log('Outer Width with Margin: ' + outerWidthWithMargin);

            console.log('Height: ' + height);
            console.log('Inner Height: ' + innerHeight);
            console.log('Outer Height: ' + outerHeight);
            console.log('Outer Height with Margin: ' + outerHeightWithMargin);
        });
    </script>
</head>
<body>
    <div id="myElement" style="width: 100px; height: 100px; padding: 10px; border: 5px solid black; margin: 20px;">
        こんにちは、世界！
    </div>
</body>
</html>

この例では、#myElementの幅と高さの各値をコンソールに出力しています。これにより、要素の幅や高さの情報を簡単に取得し、必要な操作を行うことができます。