HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM clientTopプロパティとは？使い方とサンプルコードを解説

HTML DOM の clientTop プロパティは、要素の上ボーダー（境界線）の幅をピクセル単位で返します。読み取り専用のプロパティであるため、値を設定することはできません。また、要素の上マージンや上パディングは含まれない点にも注意が必要です。

構文

clientTop プロパティの基本的な構文は以下のとおりです。

element.clientTop;

使用例

ここでは、clientTop プロパティを使って div 要素の上ボーダーの幅を取得する例を紹介します。ボタンをクリックすると、指定した div の上ボーダーの幅がピクセル単位で表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
#styleDiv {
    height: 250px;
    font-size:35px;
    text-align:center;
    width: 400px;
    padding: 10px;
    margin: 15px;
    border-top: 15px solid blue;
    background-color: lightgreen;
}
</style>
</head>
<body>
<p>下のボタンをクリックすると、div の上ボーダーの幅をピクセル単位で取得できます</p>
<button onclick="topWidth()">TOP WIDTH</button>
<div id="styleDiv">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
    function topWidth() {
        var x = document.getElementById("styleDiv");
        var txt = "Border top width: " + x.clientTop + "px";
        document.getElementById("Sample").innerHTML = txt;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

HTML DOM clientTopプロパティとは？使い方とサンプルコードを解説

「TOP WIDTH」ボタンをクリックすると、以下のように上ボーダーの幅が表示されます。

HTML DOM clientTopプロパティとは？使い方とサンプルコードを解説

コードの解説

この例では、まず id が「styleDiv」の div 要素を作成し、その id セレクタを使ってスタイルを適用しています。

#styleDiv {
    height: 250px;
    font-size:35px;
    text-align:center;
    width: 400px;
    padding: 10px;
    margin: 15px;
    border-top: 15px solid blue;
    background-color: lightgreen;
}

スタイルを適用した対象となる div 要素は以下のとおりです。

<div id="styleDiv">
<b>A sample div</b>
</div>

次に、クリックされると topWidth() 関数を実行する「TOP WIDTH」ボタンを配置しています。

<button>TOP WIDTH</button>

topWidth() 関数の内部では、まず getElementById() メソッドを使って div 要素を取得し、変数 x に代入します。続いて、その div 要素に対して clientTop プロパティを呼び出すことで、上ボーダーの幅をピクセル単位で取得し、説明用のテキストと連結して変数 txt に格納します。最後に、innerHTML プロパティを使って、id が「Sample」の段落に txt の内容を出力しています。

function topWidth() {
    var x = document.getElementById("styleDiv");
    var txt = "Border top width: " + x.clientTop + "px";
    document.getElementById("Sample").innerHTML = txt;
}

このように、clientTop プロパティを活用すれば、JavaScript から要素の上ボーダーの実際の描画幅を簡単に取得できます。ボーダーの太さに応じたレイアウト計算や、動的なスタイル制御を行いたい場合に便利なプロパティです。

  1. HTML DOM offsetTopプロパティとは？使い方と取得できる値をサンプル付きで解説

    HTML DOM offsetTopプロパティとは HTML DOMのoffsetTopプロパティは、指定した要素の上端が、親要素の上端からどれだけ離れているかを示す数値（ピクセル単位）を返します。JavaScriptで要素の垂直方向の位置を取得したい場合に活用できる、基本的かつ重要なプロパティです。 例えば、スクロールに応じたアニメーションや、要素の位置に基づいたレイアウト制御などを実装する際に役立ちます。 構文 offsetTopプロパティは、ピクセル（px）単位の数値を返します。構文は以下のとおりです。 HTMLelement.offsetTop 戻り値に含まれるもの offsetT

  2. HTML DOMのVideo widthプロパティとは？動画の幅を取得・設定する方法

    HTML DOM の Video width プロパティは、<video> 要素で表示されるメディアの幅（width）に対応する数値を取得・設定できるプロパティです。単位はピクセル（px）で扱われ、JavaScript から動的に動画プレイヤーの横幅を変更したい場合に活用できます。 構文（Syntax） width プロパティの基本的な構文は以下のとおりです。 現在の幅（px）を取得する場合 mediaObject.width 幅（px）を新しく設定する場合 mediaObject.width = number なお、HTML 属性として記述された初期値は <video wi