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

JavaScriptでテーブルの境界線の幅を変更する方法

テーブルの境界線の幅を変更するには、DOMの border プロパティを使用します。element.style.border に新しい値を代入することで、JavaScriptから境界線の太さ・スタイル・色を動的に変更できます。

以下のサンプルコードでは、ボタンをクリックするとテーブルの境界線が「幅5px・破線・青色」に変化します。実際にブラウザで実行して挙動を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <script>
         function borderFunc(x) {
            document.getElementById(x).style.border = "5px dashed blue";
         }
      </script>
   </head>

   <body>
      <table style = "border:2px solid black" id = "newtable">
         <tr>
            <td>One</td>
            <td>Two</td>
         </tr>
         <tr>
            <td>Three</td>
            <td>Four</td>
         </tr>
         <tr>
            <td>Five</td>
            <td>Six</td>
         </tr>
      </table>
      <p>
         <input type = "button" onclick = "borderFunc('newtable')"
         value = "Change Border Width">
      </p>
   </body>
</html>

コードの解説

  • borderFunc(x): 引数で受け取ったIDを持つ要素を取得し、その要素の style.border に新しい境界線スタイルを設定する関数です。
  • "5px dashed blue": 「幅5px」「破線（dashed）」「青色（blue）」を一度に指定できるショートハンド記法です。
  • onclickイベント: ボタンがクリックされると borderFunc('newtable') が呼び出され、IDが「newtable」のテーブルの境界線が更新されます。

なお、初期状態のテーブルにはインラインスタイルで border:2px solid black（幅2px・実線・黒色）が設定されており、ボタン操作によってこのスタイルが上書きされる仕組みになっています。

  1. JavaScriptで要素の最小幅を設定する方法｜minWidthプロパティの使い方

    JavaScriptで要素の最小幅を設定するには、minWidthプロパティを使用します。このプロパティはCSSのmin-widthプロパティに対応しており、px・%・emなどの単位を指定することで、ページ表示後に動的に最小幅を変更できます。 サンプルコード 以下の例では、ボタンをクリックするとid「box」のdiv要素に対して最小幅500pxが設定されます。実際にブラウザで実行して、ウィンドウ幅を狭めたときの挙動を確認してみてください。 <!DOCTYPE html> <html>    <head>     &nb

  2. JavaScriptで要素の最大幅（max-width）を設定する方法をわかりやすく解説

    JavaScriptで要素の最大幅を設定するには、maxWidthプロパティを使用します。このプロパティはCSSのmax-widthに対応しており、要素が指定した幅以上に広がらないよう制限をかけることができます。基本的な使い方要素のstyleオブジェクトにアクセスし、maxWidthプロパティに「80px」のようなピクセル値やパーセントを指定するだけで、動的に最大幅を変更できます。サンプルコード以下のコードを実行して、JavaScriptで要素の最大幅を設定する動作を確認してみましょう。ボタンをクリックすると、div要素の最大幅が80pxに設定されます。<!DOCTYPE html>