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

HTMLDOMclientTopプロパティ

HTML DOM clientTopプロパティは、要素の上部境界線の幅をピクセル単位で返します。読み取り専用のプロパティです。要素の上部マージンまたは上部パディングは、このプロパティには含まれません。

構文

以下は、clientTopプロパティの構文です-

element.clientTop;

例

clientTopプロパティの例を見てみましょう-

<!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>Click the below button to get the div top border width in pixels </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>

出力

これにより、次の出力が生成されます-

HTMLDOMclientTopプロパティ

TOPWIDTH-

をクリックすると

HTMLDOMclientTopプロパティ

上記の例では-

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（）メソッドを実行するボタンTOPWIDTHを作成しました-

<button>TOP WIDTH</button>

topWidth（）は、getElementById（）メソッドを使用して

要素を取得し、それを変数xに割り当てます。次に、
のclientTopプロパティを使用して、上部の境界線の幅をピクセル単位で取得し、テキストを追加した後、それを変数txtに割り当てます。 txt内のテキストは、innerHTMLプロパティを使用し、それにtxt変数を割り当てることでIDが「Sample」の段落内に表示されます-

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

  1. HTMLDOMoffsetTopプロパティ

    HTML DOM offsetTopプロパティは、親要素の上面を基準にした、指定された要素の最上部の位置に対応する数値を返します。 以下は構文です- 数値をピクセル（px）で返す HTMLelement.offsetTop ここで、戻り値は-に対応します 指定された要素の上部の位置とマージン 親要素の上部のパディング、スクロールバー、境界線、および余白 HTML DOM offsetTopの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM offsetT

  2. HTMLDOMビデオ幅プロパティ

    HTML DOM Video widthプロパティは、メディアの幅（ピクセル単位）に対応する数値を返す/設定します。 構文 以下は構文です- 幅を返す 数値として（px） mediaObject.width 幅を数値（px）に設定 mediaObject.width = number 動画の幅の例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Video width</title> <style>    * { &n