ywork2020.com

Title

要素の上辺にある境界線の幅を取得する

目次 (INDEX)

clientTopとは

ここで説明するclientTop とは次の語句からなるjavascriptのプロパティです。
client
読み: クライアント
意味: 得意先、顧客、依頼人
top
読み: トップ
意味: 最上部、一番上、頂上

目次に戻る

clientTopプロパティの概要

このプロパティは、要素の上辺にある境界線の高さ(縦幅)を整数のピクセル値で取得することができます。

これをCSSでいうならば、 border-top-width プロパティの値ということになります。

このプロパティは読み取り専用ですので値の代入はできません。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var intClientTop = Element.clientTop;

目次に戻る

サンプルコードと実行結果

このサンプルではdiv要素の上辺の境界線をCSSのborder-top-widthプロパティにアクセスして変更できるようにしています。 値を変更するにはdiv要素の上部に配置されたinput要素number型の値をユーザーが変更する必要があります。

結果として、その変更された値をclientTopプロパティで取得してdiv要素内に表示することにしました。

サンプルコード: CSS
<style>
	#idDiv{
		background-clip: content-box;
		background-color: ##steelblue;
		border: 5px solid ##red;
		border-top-width: 15px;
		color: ##white;
		padding: 10px;
		height: 180px;
		width: 180px;
		text-align: center;
	}
</style>
  • 06: border-top-width (このCSSプロパティの値がclientTopプロパティと連動しています。)
サンプルコード: HTML
<body>
	<label for="idInNum">border-top-width:</label> 
	<input type="number" id="idInNum" min="0" max="30" value="15" onchange="funGetTop()">
	<div id="idDiv">innerHTML<br></div>
</body>
  • 03: input要素number型 (この値を変更するとonchangeイベントでfunGetTop()関数を実行します。)
サンプルコード: script
<script>
	let elmInNum = document.getElementById("idInNum");
	let elmDiv = document.getElementById("idDiv");
	function funGetTop(){
		elmDiv.style.borderTopWidth = elmInNum.value + "px";
		elmDiv.innerHTML = "clientTop<br>" + elmDiv.clientTop + "px";
	}
	funGetTop()
</script>
  • 04-07: funGetTop()関数 (この関数でCSSプロパティの変更とclientTopプロパティから得た値の出力を行います。)
  • 08: 初回funGetTop()関数 (ページの初回読込みにfunGetTop()関数を実行します。)
実行結果:
innerHTML

目次に戻る