正確なセンタリングのために HTML 要素の幅と高さを取得するにはどうすればよいですか?-jsチュートリアル-php.cn

正確なセンタリングのために HTML 要素の幅と高さを取得するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-04 01:25:12

オリジナル

749 人が閲覧しました

How Can I Get the Width and Height of an HTML Element for Precise Centering?

中央揃えのための HTML 要素の幅と高さの計算

ブラウザの表示内で HTML 要素を中央に配置するには、実際の幅と高さを決定することが重要です。これを実現する方法は次のとおりです。

1. .offsetWidth プロパティと .offsetHeight プロパティ

次を使用して要素のオフセット幅と高さを取得できます。

var width = document.getElementById('foo').offsetWidth;

ログイン後にコピー

2. .getBoundingClientRect() 関数

この関数は、CSS 変換を考慮した要素の寸法と位置に関する詳細情報を提供します:

console.log(document.getElementById('foo').getBoundingClientRect())

/* Output:
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}
*/

ログイン後にコピー

ブラウザサポート:

.offsetWidth および.offsetHeight: すべての主要なブラウザ (IE8 )
.getBoundingClientRect(): すべての主要なブラウザ (IE9 )

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