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