ywork2020.com

Title

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

目次 (INDEX)

clientLeftとは

ここで説明するclientLeft とは次の語句からなるjavascriptのプロパティです。
client
読み: クライアント
意味: 得意先、顧客、依頼人
left
読み: レフト
意味: 左、左側の、左方の

目次に戻る

clientLeftプロパティの概要

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

これをCSSでいうならば、 border-left-width プロパティの値ということになります。 ただし、これは要素の左方にスクロールバーが無い場合であり、要素のテキストが右から左に向かう設定では、 状況によってはスクロールバーが表示されることがあります。この場合にはスクロールバーの幅も含んだ値を返しますので注意が必要です。

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

目次に戻る

構文

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

var intClientLeft = Element.clientLeft;

目次に戻る

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

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

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

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

目次に戻る