HTML要素の幅と高さを取得する

2024-04-05

HTML要素の実際の幅と高さを取得する方法

offsetWidthとoffsetHeightは、要素の幅と高さをピクセル単位で取得します。ただし、これらのプロパティには、要素のボーダー幅とスクロールバーの幅が含まれます。

const element = document.getElementById('my-element');

const width = element.offsetWidth;
const height = element.offsetHeight;

console.log(`幅: ${width}px`);
console.log(`高さ: ${height}px`);

const element = document.getElementById('my-element');

const width = element.clientWidth;
const height = element.clientHeight;

console.log(`幅: ${width}px`);
console.log(`高さ: ${height}px`);

getBoundingClientRect()は、要素の周りの矩形領域の情報を含むオブジェクトを返します。このオブジェクトには、要素の幅と高さ、および要素の左上隅の位置が含まれます。

const element = document.getElementById('my-element');

const rect = element.getBoundingClientRect();

const width = rect.width;
const height = rect.height;

console.log(`幅: ${width}px`);
console.log(`高さ: ${height}px`);

getComputedStyle()は、要素のスタイル情報を取得する関数です。この関数を使用して、要素の幅と高さを取得することができます。

const element = document.getElementById('my-element');

const style = getComputedStyle(element);

const width = style.width;
const height = style.height;

console.log(`幅: ${width}`);
console.log(`高さ: ${height}`);

jQueryを使用している場合は、width()とheight()メソッドを使用して、要素の幅と高さを取得することができます。

const element = $('#my-element');

const width = element.width();
const height = element.height();

console.log(`幅: ${width}px`);
console.log(`高さ: ${height}px`);

HTML要素の実際の幅と高さを取得するには、いくつかの方法があります。それぞれの方法には、取得できる値の種類や、使用できる状況などに違いがあります。

どの方法を使用するかは、状況に応じて選択する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <div id="my-element" style="width: 200px; height: 100px; border: 1px solid red;">
    要素の幅と高さ
  </div>

  <script>
    const element = document.getElementById('my-element');

    // offsetWidth と offsetHeight
    const width1 = element.offsetWidth;
    const height1 = element.offsetHeight;

    // clientWidth と clientHeight
    const width2 = element.clientWidth;
    const height2 = element.clientHeight;

    // getBoundingClientRect()
    const rect = element.getBoundingClientRect();
    const width3 = rect.width;
    const height3 = rect.height;

    // getComputedStyle()
    const style = getComputedStyle(element);
    const width4 = style.width;
    const height4 = style.height;

    // jQuery
    const $element = $('#my-element');
    const width5 = $element.width();
    const height5 = $element.height();

    console.log(`offsetWidth: ${width1}px`);
    console.log(`offsetHeight: ${height1}px`);
    console.log(`clientWidth: ${width2}px`);
    console.log(`clientHeight: ${height2}px`);
    console.log(`getBoundingClientRect(): width: ${width3}px, height: ${height3}px`);
    console.log(`getComputedStyle(): width: ${width4}, height: ${height4}`);
    console.log(`jQuery: width: ${width5}px, height: ${height5}px`);
  </script>
</body>
</html>

offsetWidth: 202px
offsetHeight: 102px
clientWidth: 200px
clientHeight: 100px
getBoundingClientRect(): width: 200px, height: 100px
getComputedStyle(): width: 200px, height: 100px
jQuery: width: 200px, height: 100px

このコードを参考に、HTML要素の実際の幅と高さを取得してみてください。

HTML要素の実際の幅と高さを取得するその他の方法

getComputedStyle()とparseFloat()

getComputedStyle()を使用して要素のスタイル情報を取得し、parseFloat()を使用して数値に変換することができます。

const element = document.getElementById('my-element');

const style = getComputedStyle(element);

const width = parseFloat(style.width);
const height = parseFloat(style.height);

console.log(`幅: ${width}px`);
console.log(`高さ: ${height}px`);

getBoundingClientRect()とinnerWidth / innerHeight

getBoundingClientRect()を使用して要素の周りの矩形領域の情報を含むオブジェクトを取得し、innerWidth / innerHeightを使用して要素の幅と高さを取得することができます。

const element = document.getElementById('my-element');

const rect = element.getBoundingClientRect();

const width = rect.width - rect.innerWidth;
const height = rect.height - rect.innerHeight;

console.log(`幅: ${width}px`);
console.log(`高さ: ${height}px`);