バニラJavaScriptのHTML要素の寸法をチェックする

Webテクノロジが動作するように、Webページのサイズは予測できません.これは特にそれらの規格を必要としているスクリーンの形の応答性と多数の現代的な標準とともに本当です.あなたはバニラJavaScriptを使用してHTML要素のサイズを取得する方法を疑問に思うかもしれません.これを測定する方法はいくつかあります.

高さと幅
要素が占有するスペースのフルサイズを取得するには、HTMLElement.offsetHeightとHTMLElement.offsetWidthを使用できます.要素のこれらのプロパティは、スクロールバー、パディング、およびボーダーの幅を含む値を提供します.

// Grab an element with id target
var element = document.getElementById('target');

// Check its height and width
console.log('h', element.offsetHeight);
console.log('w', element.offsetWidth);

これらの同じ測定値を達成する別の方法はgetBoundingClientRect()を使用していますが、変換が問題の要素に適用された場合、その関数は正確な測定値を提供しません.これらの特性が我々の要素に適用される変換を考慮するので、それはoffsetHeightとoffsetWidthを使う習慣を得る方がよいです.

内容を見る
要素のフルサイズを取得する代わりに、コンテンツのサイズを見ることに興味があります.ここでは、ボーダー、マージン、およびスクロールバーを無視するメソッドを以下に示します.これらのプロパティは、パディングを含む要素の内容の寸法を提供します.

// Log the height of visible content & padding
console.log('h', element.clientHeight);
// Log the width of visible content & padding
console.log('w', element.clientWidth);

また、画面上に表示されている内容にかかわらず、コンテンツのサイズを見ることができます.Element.clientHeightおよびElement.clientWidthは、スクロールバーが使用中であっても、すべてのコンテンツが現在表示されているというわけではなく、コンテンツの高さと幅を提供する.

// Log full height of content
console.log('h', element.scrollHeight);
// Log full width of content
console.log('w', element.scrollWidth);

ビルド何か
これらはちょうどあなたがラインをダウンする必要がありますいくつかの小さなテクニックです.それらをあなたのツールベルトに置いて、何かを造るために、彼らを使ってください!たとえば、ドキュメントの読み込み時にデータ属性に要素の高さと幅を格納したり、サイズに基づいて要素のスタイルを変更するためにそれらのデータ属性に減衰するCSS規則を記述できます.このものが役に立つかもしれないもう一つの例は、要素の中心を見つけることです;私たちは、要素の高さと幅を得ることができて、それらを半分に分けることができます.あなたはこれらのテクニックを使用するにはほとんど練習方法を見つけることができます.