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

HTMLDOMclientWidthプロパティ

HTML DOM clientWidthプロパティは、HTML要素の表示可能な幅を取得するために使用されます。この幅にはパディングが含まれますが、境界線、スクロールバー、余白は含まれません。コンテンツが要素からオーバーフローした場合でも、要素の幅のみが返されます。

構文

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

element.clientWidth

例

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

<!DOCTYPE html>
<html>
<head>
<style>
#divStyle {
   width: 200px;
   height: 200px;
   padding: 10px;
   margin: 15px;
   border: 5px solid blue;
   background-color: lightgreen;
}
</style>
</head>
<body>
<p>Click the below button to get the widhth of the div</p>
<button onclick="getWidth()">GET WIDTH</button>
<div id="divStyle">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
   function getWidth() {
      var x = document.getElementById("divStyle");
      var txt = "Width including padding: " + x.clientWidth + "px";
      document.getElementById("Sample").innerHTML = txt;
   }
</script>
</body>
</html>

出力

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

HTMLDOMclientWidthプロパティ

GETWIDTH-

をクリックすると

HTMLDOMclientWidthプロパティ

上記の例では-

IDが「styleDIV」のdivを作成し、そのIDを使用してスタイルを適用しました。

#divStyle {
   width: 200px;
   height: 200px;
   padding: 10px;
   margin: 15px;
   border: 5px solid blue;
   background-color: lightgreen;
}

div-

<div id="divStyle">
<b>A sample div</b>
</div>

次に、クリック時にgetWidth（）メソッドを実行するボタンGETWIDTHを作成しました-

<button onclick="getWidth()">GET WIDTH</button>

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

要素を取得し、それを変数xに割り当てます。次に、
のclientWidthプロパティを使用してその幅を取得し、テキストを追加した後、それを変数txtに割り当てます。 txt内のテキストは、段落のinnerHTMLプロパティを使用して段落内に表示され、txt変数が割り当てられます-

function getWidth() {
   var x = document.getElementById("divStyle");
   var txt = "Width including padding: " + x.clientWidth + "px";
   document.getElementById("Sample").innerHTML = txt;
}

  1. HTMLDOMスタイルjustifyContentプロパティ

    HTML DOM justifyContentプロパティは、使用可能なすべてのスペースを使用しない場合に、フレックスアイテムを主軸上で水平方向に整列させるために使用されます。 以下は、-の構文です。 justifyContentプロパティの設定- object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit" 上記の特性は次のように説明されます- 値 説明 flex-start これは、コンテナの先頭にア

  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