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

JavaScriptで要素の境界線（ボーダー）の幅を設定する方法

JavaScriptで要素の境界線（ボーダー）の幅を設定するには、borderWidthプロパティを使用します。このプロパティに値を代入することで、CSSで定義した境界線の太さを動的に変更できます。

指定できる値は「thin（細い）」「medium（普通）」「thick（太い）」といったキーワードのほか、「2px」や「0.5em」のような具体的な単位付きの値も利用可能です。

以下のサンプルコードでは、グレーの太い境界線を持つボックス要素を用意し、ボタンをクリックすると境界線が細く変わる仕組みを実装しています。実際にコードを実行して、境界線の幅がどのように変化するか確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: thick solid gray;
            width: 300px;
            height: 200px
         }
      </style>
   </head>
   
   <body>
      <div id = "box">デモテキスト</div>
      <br>
      <br>
      
      <button type = "button" onclick = "display()">境界線の幅を変更</button>
      <script>
         function display() {
            document.getElementById("box").style.borderWidth = "thin";
         }
      </script>
      
   </body>
</html>

コードのポイント

このサンプルの重要なポイントは、document.getElementById("box").style.borderWidthの部分です。IDが「box」の要素を取得し、そのスタイルオブジェクトのborderWidthプロパティに「thin」を設定することで、クリック操作ひとつで境界線の幅を変更しています。

なお、上下左右それぞれの境界線の幅を個別に指定したい場合は、borderTopWidth、borderBottomWidth、borderLeftWidth、borderRightWidthといったプロパティを使用すると便利です。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. JavaScriptで要素のアウトラインの幅を設定する方法

    JavaScriptで要素の周りのアウトライン（外枠）の幅を設定するには、outlineWidthプロパティを使用します。「7px」のような値を指定することで、アウトラインの太さを自由にコントロールできます。outlineWidthプロパティとはoutlineWidthは、CSSのoutline-widthに対応するJavaScriptのスタイルプロパティです。アウトラインを実際に表示するには、あわせてoutlineStyle（線の種類）とoutlineColor（線の色）も設定する必要があります。なお、アウトラインはborder（境界線）と似ていますが、要素のサイズやレイアウトに影響を与えず