HTML 要素のサイズを正確に取得するにはどうすればよいですか?-jsチュートリアル-php.cn

HTML 要素のサイズを正確に取得するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-22 02:02:09

オリジナル

1066 人が閲覧しました

How Can I Accurately Get the Dimensions of HTML Elements?

HTML 要素の寸法の取得

要素の配置やコンテンツのレイアウトなどのタスクでは、HTML 要素の寸法を正確に決定することが重要です。この記事では、特定の要素の実際の幅と高さを取得するさまざまな方法について説明します。

方法 1: Element.offsetWidth および Element.offsetHeight

これらのプロパティは、要素のピクセルの幅と高さ。パディングと境界線を含みますが、マージンは含まれません。これらはすべての主要なブラウザでサポートされています。

var divElement = document.getElementById('myDiv');
var width = divElement.offsetWidth;
var height = divElement.offsetHeight;

ログイン後にコピー

メソッド 2: getBoundingClientRect()

このメソッドは、要素に関するさまざまな寸法と位置情報を含むオブジェクトを返します。特に、幅と高さのプロパティは、CSS 変換が適用された後の要素のサイズを表します。

var divElement = document.getElementById('myDiv');
var boundingRect = divElement.getBoundingClientRect();
var width = boundingRect.width;
var height = boundingRect.height;

ログイン後にコピー

方法 3: offsetParent

ただし、前のものより精度は低くなります。メソッドの offsetParent を使用して、親を基準とした要素の位置を決定できます。オフセットの幅と高さを再帰的に計算することで、要素の実際の寸法を近似することができます。ただし、この方法はすべてのブラウザでサポートされているわけではありません。

function getOffsetDimensions(element) {
  var width = element.offsetWidth;
  var height = element.offsetHeight;
  var parent = element.offsetParent;
  while (parent) {
    width += parent.offsetWidth;
    height += parent.offsetHeight;
    parent = parent.offsetParent;
  }
  return { width: width, height: height };
}

ログイン後にコピー

以上がHTML 要素のサイズを正確に取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。