jQueryを使わずにDivの高さを取得する方法は?

jQuery を使用せずに Div の高さを取得する

開発者は、jQuery などのライブラリに依存せずに div 要素の高さを取得する方法を探すことがよくあります。 。 jQuery の .height() メソッドがよく引用されますが、同じタスクを効果的に実行できる単純な JavaScript ソリューションがあります。

jQuery の .height() の代替手段

JavaScript のみを使用して div の高さを決定する場合、開発者は div を表す HTMLElement オブジェクトの clientHeight プロパティまたは offsetHeight プロパティを利用できます。各プロパティの機能は次のとおりです。

• clientHeight: このプロパティは、パディングを含むが境界線とスクロールバーを除く、div の表示コンテンツの高さを測定します。
• offsetHeight: このプロパティは合計の高さを返します。

実装

clientHeight を使用して div の高さを取得するには、次の構文を使用します。

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight;</code>

また、測定にスクロールバーと境界線を含めるには、offsetHeight を使用できます。

<code class="javascript">var offsetHeight = document.getElementById('myDiv').offsetHeight;</code>

例

これは例です。両方のプロパティの使用例を示します:

<code class="html"><div id="myDiv" style="height: 100px; padding: 20px; border: 10px solid black;">
    Content
</div></code>

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight; // Returns 80
var offsetHeight = document.getElementById('myDiv').offsetHeight; // Returns 130</code>

この例では、clientHeight はパディングとボーダーを除外するため 80 ピクセルを返しますが、offsetHeight は div の高さに寄与するすべての要素を含む 130 ピクセルを返します。

以上がjQueryを使わずにDivの高さを取得する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。