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

JavaScriptで要素の上側ボーダーの幅を設定する方法を解説

JavaScriptで要素の上側ボーダー（境界線）の幅を設定するには、borderTopWidthプロパティを使用します。このプロパティにピクセル値やキーワードを指定することで、上側のボーダー幅を動的に変更できます。

borderTopWidthプロパティとは

borderTopWidthは、CSSのborder-top-widthに対応するJavaScriptのスタイルプロパティです。「10px」のような具体的な値のほか、「thin」「medium」「thick」といったキーワードでも幅を指定できます。

サンプルコード

以下のコードを実行すると、ボタンをクリックしたときにボックスの上側ボーダーの幅が10pxに変更される様子を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: thick solid blue;
            width: 300px;
            height: 300px;
         }
      </style>
   </head>
   <body>
      <div id="box">デモテキスト</div>
      <br><br>
      <button type="button" onclick="display()">上側ボーダーの幅を変更</button>
      <script>
         function display() {
            document.getElementById("box").style.borderTopWidth = "10px";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、idが「box」のdiv要素に対して、あらかじめCSSで太い青色の実線ボーダーを設定しています。ボタンがクリックされるとdisplay()関数が呼び出され、style.borderTopWidthに「10px」を代入することで、上側のボーダー幅だけが変化します。

なお、borderTopWidthを単独で使用する場合は、事前にborder-styleが設定されている必要があります。スタイルが指定されていないと、ボーダー幅を変更しても表示に反映されない点に注意しましょう。

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

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

  2. JavaScriptで要素の上マージンを設定する方法（marginTopプロパティの使い方）

    JavaScriptで要素の上マージン（トップマージン）を設定するには、marginTop プロパティを使用します。document.getElementById() などで対象の要素を取得し、style.marginTop に「150px」のような値を文字列で代入するだけで、動的に上マージンを変更できます。 サンプルコード 以下のコードでは、ボタンをクリックすると id「myID」が設定された div 要素に上マージン150pxが追加されます。実際に実行して動作を確認してみてください。 <!DOCTYPE html> <html>    <h