この記事では、HTML での実用的な実装とともに、DOM 要素「clientTop」について説明します。
HTMLでDOM要素「clientTop」を使用するには?
「clientTop」プロパティは、Web ページの作成中に HTML 要素のレイアウトと配置を操作するのに役立ちます。その見返りとして、レスポンシブで動的な Web サイト レイアウトの作成に役立ちます
例
「clientTop」プロパティをよりよく理解するための例を見てみましょう。たとえば、この例では、上部の位置からの境界線の重みが評価されます。
< 体 >
< h3 ID = '例' > より良い説明のためにLinuxhintによって提供された記事 < / h3 >
< / 体 >
まず、「 <本体> 「タグ作成」 」タグを付けて、ダミーデータを提供します。また、「」のIDを割り当てます 例 ' それと。
< スタイル >
＃例 {
国境 : 2px ベタ黒;
パディング: 10px;
バックグラウンド- 色 ： ライトグレー;
}
< / スタイル >
その後、「 <スタイル> ”タグ”を選択 例 ” id を設定し、” の値を設定します 2px ソリッド フォレストグリーン 」に「 国境 ' 財産。また、「」を使用していくつかの基本的なスタイリングを適用します。 パディング ' と ' 背景色 より良い視覚化のためのプロパティ。
上記のコードの実行後、Web ページは次のように表示されます。
出力は、div 要素と h3 要素が基本的なスタイルで Web ページに表示されていることを示しています。
「clientTop」プロパティを使用
「を使用するには クライアントトップ 」プロパティを HTML 要素に追加するには、次のコード行を「 <スクリプト> ' 鬼ごっこ。このコード スニペットの説明は次のとおりです。
< 脚本 >例だった = document.getElementById ( '例' ) ;
var topHeight = example.clientTop;
console.log ( '上枠の高さ: ' + トップハイト + 「ピクセル」 ) ;
< / 脚本 >
上記のコード スニペットでは、次のようになります。
- まず、変数「 例 」が作成され、情報を保存したり、HTML 要素にいくつかのアクションを適用したりします。
- 次に、「 トップハイト 」変数は「 例 」変数とともに「 クライアントトップ ' 財産。
- 最後に、「 トップハイト 」を使用してコンソールの変数 console.log() ' 方法。
上記のコード スニペットの実行後、コンソールは次のように表示されます。
上記の出力は、選択した要素の上境界線の高さ/幅がコンソールにピクセル単位で表示されることを示しています。
結論
「 クライアントトップ 」プロパティは、ボーダーとパディングを含む HTML 要素の合計の高さを測定します。 「clientTop」プロパティは、インタラクティブな Web ページの構築に役立つ、選択された HTML 要素の上端位置からの境界線の太さを返します。この記事では、HTML の DOM 要素「clientTop」が何を意味するかを説明しました。