getBoundingClientRect() メソッドで DIV の幅を取得する

2024-04-17

JavaScript で DIV の幅を取得する方法

offsetWidth プロパティを使用する

最も一般的な方法は、offsetWidth プロパティを使用することです。これは、要素の幅と左右のボーダー幅を含めたピクセル単位の値を返します。

const divElement = document.getElementById('myDiv');
const width = divElement.offsetWidth;
console.log(width); // 例：300

clientWidth プロパティは、要素のコンテンツ領域の幅のみをピクセル単位で返します。ボーダー幅は含まれません。

const divElement = document.getElementById('myDiv');
const width = divElement.clientWidth;
console.log(width); // 例：280 (ボーダー幅が 10px の場合)

getBoundingClientRect() メソッドは、要素の境界ボックスに関する情報を提供するオブジェクトを返します。このオブジェクトから、要素の幅を計算することができます。

const divElement = document.getElementById('myDiv');
const rect = divElement.getBoundingClientRect();
const width = rect.width;
console.log(width); // 例：300

補足

上記のコード例では、getElementById() メソッドを使用して ID で要素を取得しています。他の方法で要素を取得することもできます。
要素の幅を変更するには、offsetWidth または clientWidth プロパティに新しい値を割り当てることができます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DIV の幅を取得</title>
</head>
<body>
    <div id="myDiv" style="width: 300px; height: 100px; border: 10px solid red;">
        コンテンツ
    </div>

    <script src="script.js"></script>
</body>
</html>

script.js

const divElement = document.getElementById('myDiv');

// `offsetWidth` プロパティを使用する
const width1 = divElement.offsetWidth;
console.log(`offsetWidth: ${width1}px`); // 例：300px

// `clientWidth` プロパティを使用する
const width2 = divElement.clientWidth;
console.log(`clientWidth: ${width2}px`); // 例：280px

// `getBoundingClientRect()` メソッドを使用する
const rect = divElement.getBoundingClientRect();
const width3 = rect.width;
console.log(`getBoundingClientRect(): ${width3}px`); // 例：300px

このコードを実行すると、ブラウザコンソールに以下の出力が表示されます。

offsetWidth: 300px
clientWidth: 280px
getBoundingClientRect(): 300px

この例では、3 つの方法で DIV 要素の幅を取得する方法をを実演しています。ご自身のニーズに合わせて適切な方法を選択してください。

上記のコード例は、基本的な例です。以下のバリエーションもご参考ください。

要素の幅を動的に変更する

const divElement = document.getElementById('myDiv');

function changeWidth() {
  divElement.style.width = '500px'; // 幅を 500px に変更
}

changeWidth(); // 幅を変更

複数の要素の幅を取得する

const divs = document.querySelectorAll('div');

for (const div of divs) {
  const width = div.offsetWidth;
  console.log(`要素の幅: ${width}px`);
}

単位を変換する

const divElement = document.getElementById('myDiv');
const widthInPx = divElement.offsetWidth;
const widthInCm = widthInPx / 2.54; // ピクセルからセンチメートルに変換
console.log(`幅 (px): ${widthInPx}`);
console.log(`幅 (cm): ${widthInCm}`);

JavaScript で DIV の幅を取得するその他の方法

getComputedStyle() メソッドは、要素の現在のスタイルプロパティを取得するために使用できます。この方法を使用して、要素の幅をピクセル単位で取得することができます。

const divElement = document.getElementById('myDiv');
const width = window.getComputedStyle(divElement).width;
console.log(width); // 例：300px

この方法は、要素のスタイルがインラインで設定されている場合に役立ちます。

layoutBox プロパティは、要素のレイアウトボックスの幅をピクセル単位で返します。これは、offsetWidth プロパティに似ていますが、layoutBox は要素のスクロールバーの幅も考慮します。

const divElement = document.getElementById('myDiv');
const width = divElement.layoutBox.width;
console.log(width); // 例：300px (スクロールバーがある場合)

この方法は、要素にスクロールバーがある場合に役立ちます。

const divElement = document.getElementById('myDiv');
const rect = divElement.getBoundingClientRect();
const width = rect.width;
console.log(width); // 例：300px

この方法は、要素の幅と高さを同時に取得する必要がある場合に役立ちます。

DIV の幅を取得するには、さまざまな方法があります。それぞれの方法には長所と短所があるため、状況に応じて適切な方法を選択することが重要です。

javascript html