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

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

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

構文

clientLeftプロパティの構文は以下の通りです。

element.clientLeft

サンプルコード

HTML DOMのclientLeftプロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
#styleDiv {
    height: 200px;
    width: 200px;
    padding: 5px;
    margin: 10px;
    border-left: 10px solid blue;
    background-color: lightgreen;
}
</style>
</head>
<body>
<p>下のボタンをクリックすると、左ボーダーの幅をピクセル単位で取得できます</p>
<button onclick="leftWidth()">LEFT WIDTH</button>
<div id="styleDiv">
</div>
<p id="Sample"></p>
<script>
    function leftWidth() {
        var x = document.getElementById("styleDiv");
        var txt = "Border left width: " + x.clientLeft + "px";
        document.getElementById("Sample").innerHTML = txt;
    }
</script>
</body>
</html>

実行結果

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

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

「LEFT WIDTH」ボタンをクリックすると −

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

コードの解説

上記の例では、以下のような処理を行っています。

まず、id「styleDiv」を持つdiv要素を作成し、そのidセレクタを通じてスタイルを適用しています。

#styleDiv {
    height: 200px;
    width: 200px;
    padding: 5px;
    margin: 10px;
    border-left: 10px solid blue;
    background-color: lightgreen;
}
<div id="styleDiv">
</div>

次に、クリックされるとleftWidth()関数を実行する「LEFT WIDTH」ボタンを作成しています。

<button onclick="leftWidth()">LEFT WIDTH</button>

leftWidth()関数では、getElementById()メソッドを使ってdiv要素を取得し、変数xに代入します。続いて、div要素に対してclientLeftプロパティを適用することで左ボーダーの幅を取得し、説明用のテキストを連結して変数txtに格納します。最後に、innerHTMLプロパティを使って、txt変数の内容を段落要素内に表示しています。

function leftWidth() {
    var x = document.getElementById("styleDiv");
    var txt = "Border left width: " + x.clientLeft + "px";
    document.getElementById("Sample").innerHTML = txt;
}
  1. HTML DOM offsetLeftプロパティとは？使い方をサンプルコード付きで解説

    HTML DOM offsetLeftプロパティとは HTML DOMのoffsetLeftプロパティは、指定した要素の左端が親要素の左側からどのくらいの位置にあるかを表す数値を返します。戻り値はピクセル（px）単位の整数値です。 このプロパティは、要素の配置計算やドラッグ＆ドロップ機能の実装など、正確な位置情報が必要となる場面で非常に役立ちます。 構文 構文は以下の通りです。 HTMLelement.offsetLeft offsetLeftが返す値には、次のものが含まれます。 指定した要素自体の左位置とマージン（margin） 親要素の左パディング（padding）、スクロールバー、ボー

  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