このブログでは、DOM 要素の使用方法を示しています クライアントの高さ HTMLで。
HTMLでDOM要素「clientHeight」を使用するには?
「 クライアントの高さ 」プロパティを使用すると、開発者は要素の表示コンテンツの高さを計算できます。要素を相互に相対的に配置したり、ユーザーがスクロール可能なコンテナーの右端までスクロールしたかどうかを判断したりするのに役立ちます。また、Web ページの残りの未使用スペースに関する情報も提供します。
例
「clientHeight」プロパティのより良いデモンストレーションの例を見てみましょう。たとえば、「 オンクリック 」イベントリスナーは、「 クライアントの高さ ' 財産：
< 体 >
< h2 ID = 'エレメント' >< / h2 >
< h2 ID = 'エレメント' オンクリック = 'showelementHeight()' >
高さを表示するには Linuxhint Article をクリックしてください!
< / h2 >
< 脚本 >
関数 showelementHeight() {
var example = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('高さ: ' + elementHeight + ' ピクセル');
}
< / 脚本 > >
< / 体 >
上記のコード スニペットの説明を次に示します。
- 最初に、「 「」内のタグ <本体> 」タグを付けて、ダミーデータを提供します。また、「」のIDを割り当てます エレメント 」を選択した HTML 要素に追加します。
- 次に、「 onclick() 」を呼び出すイベントリスナー「 showelementHeight() 」 ユーザーが「 ' エレメント。
- 次に、「 showelementHeight() ” 関数は “ という名前の変数を作成します 例 」の ID を持つ HTML 要素のインスタンスとして機能します。 エレメント 」。
- 次に、「」という名前の別の変数を作成します 要素の高さ 「clientHeight」プロパティによって提供される結果を格納します。
- その後、「 要素の高さ ''変数を使用してアラートボックスに「 アラート() ' 方法。
最後に、次の CSS プロパティを追加して、「 h2 ' エレメント：
< スタイル >
＃エレメント {
余白: 20px;
パディング: 10px;
バックグラウンド- 色 : ダークシアン;
身長 : 300px;
文章- 整列する ： 中心;
ライン- 身長 : 100px;
}
< / スタイル >
上記のコード スニペットでは、次の CSS プロパティが id を持つ div に割り当てられます。 エレメント 」：
- 「 20px 」、「 10px ' と ' ダークシアン ” 値は CSS に提供されます “ マージン 」、「 パディング ' と ' 背景色 」プロパティ、それぞれ。
- また、 身長 」、「 テキスト揃え ' と ' 行の高さ 」 ユーザーの可視性を高める CSS プロパティ。
上記のコード スニペットの実行後、Web ページは次のように表示されます。
出力は、ユーザーが要素をクリックするたびに、選択された要素の高さが警告ボックスに表示されることを示しています。
結論
「 クライアントの高さ 」プロパティを HTML に追加し、id 属性にアクセスして HTML 要素を選択します。その後、「clientHeight」プロパティをアタッチして結果を表示します。これは読み取り専用のプロパティで、結果をピクセル単位で返します。 「clientHeight」プロパティは「