HTML要素の実際の幅と高さを取得するjsメソッド

次のエディターは、HTML 要素の実際の幅と高さを取得するための js メソッドを提供します。編集者がとても良いと思ったので、参考として共有したいと思います。エディターをフォローして見てみましょう

1 つ目は、#p1{width:120px;} のように、幅と高さの両方がスタイル シートに記述されている場合です。この場合、#p1.style.width では幅を取得できませんが、#p1.offsetWidth では幅を取得できます。

2 つ目は、style="width:120px;" のように幅と高さがインラインで記述されている場合です。この場合、幅は上記 2 つの方法で取得できます。

まとめ、id.offsetWidth と id.offsetHeight はスタイルがスタイルシートに記述されているかインラインに記述されているかに関係なく、要素の幅と高さを取得するときにこれら 2 つの属性を使用するのが最善です。属性がインライン スタイルで記述されていない場合、id.style.atrr を通じて属性を取得できないことに注意してください。

現在、フロントエンド制作ではスタイルを直接スタイルに記述することはほとんどなく、すべてスタイルシートに記述されています。取得したいスタイルに対応するものが存在しない場合(#p1.style.widthが#p1.offsetWidthに対応するのと同じように)、ブラウザを使わずにスタイルシートの属性を個別に取得するしかありません。 「JS Get Style」プロパティ」など。

コード:

var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度

関連する推奨事項: ページ更新可能なカウントダウン効果を実装する

js+html5

以上がHTML要素の実際の幅と高さを取得するjsメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。