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

【HTML DOM】borderTopプロパティの使い方とサンプルコード解説

HTML DOM の borderTop プロパティとは

HTML DOM の borderTop プロパティは、要素の上側（トップ）のボーダーに関するスタイルを、まとめて取得・設定できるショートハンド（省略記法）です。このプロパティひとつで、border-top-width（幅）、border-top-style（スタイル）、border-top-color（色）の3つの値を同時に操作できます。

構文

borderTop プロパティを設定する場合の構文は以下のとおりです。

object.style.borderTop = "width style color|initial|inherit"

パラメータの説明

パラメータ説明
width上ボーダーの幅を設定します。
style上ボーダーのスタイル（実線・破線など）を設定します。
color上ボーダーの色を設定します。
initialプロパティをデフォルト値に設定します。
inherit親要素のプロパティ値を継承します。

borderTop プロパティの使用例

以下に、borderTop プロパティの具体的な使用例を示します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
   #P1 {
      border-Top: 4px solid magenta;
      font-size: 1.5rem;
   }
</style>
<script>
   function changeBorderTop(){
      document.getElementById("P1").style.borderTop="9px dashed red";
      document.getElementById("Sample").innerHTML="The Top border for the paragraph element is now  changed ";
   }
</script>
</head>
<body>
   <p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>
   <p>Change the above paragraph Top border properties by clicking the below button</p>
   <button onclick="changeBorderTop()">Change Border Top</button>
   <p id="Sample"></p>
</body>
</html>

実行結果

【HTML DOM】borderTopプロパティの使い方とサンプルコード解説

「Change Border Top」ボタンをクリックすると −

【HTML DOM】borderTopプロパティの使い方とサンプルコード解説

コードの解説

上記の例では、まず id「P1」を持つ段落要素を作成し、その中にサンプルテキストを配置するとともに、対応する CSS スタイルを適用しています。

#P1 {
   border-Top: 4px solid magenta;
   font-size: 1.5rem;
}
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>

次に、ユーザーがクリックすると changeBorderTop() 関数が実行されるボタン「Change Border Top」を作成しました。

<button onclick="changeBorderTop()">Change Border Top</button>

changeBorderTop() 関数では、getElementById() メソッドを使って id「P1」の段落要素の borderTop スタイルプロパティを取得し、その値を「9px dashed red」に変更しています。その後、innerHTML プロパティを使用して、id「Sample」の段落に変更が完了したことを示すメッセージを表示します。

function changeBorderTop(){
   document.getElementById("P1").style.borderTop="9px dashed red";
   document.getElementById("Sample").innerHTML="The top border for the paragraph element is now changed";
}

  1. HTML DOMのborderStyleプロパティとは？使い方と設定できる値を徹底解説

    borderStyleプロパティとはHTML DOMのborderStyleプロパティは、要素のボーダー（枠線）スタイルを一括で取得・設定できるショートハンド（省略記法）です。1〜4個の値を指定でき、指定した値の数によって以下のようにスタイルが適用されます。値を4つ指定した場合 … 上 → 右 → 下 → 左の順（時計回り）にそれぞれのボーダースタイルが適用されます。値を1つだけ指定した場合 … 4つの辺すべてに同じスタイルが適用されます。値を2つ指定した場合 … 1番目の値が上下に、2番目の値が左右に適用されます。構文borderStyleプロパティを設定する際の基本的な構文は次のとおりです

  2. HTML DOMのborderRightStyleプロパティとは？使い方と設定値を徹底解説

    HTML DOMのborderRightStyleプロパティは、要素の右側ボーダー（境界線）のスタイルを設定、または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの見た目を変更したい場合に活用できます。 borderRightStyleプロパティの構文 右ボーダーのスタイルを設定する場合の構文は以下のとおりです。 object.style.borderRightStyle = value 指定できる値の一覧 borderRightStyleプロパティに指定できる主な値とその説明は次の表のとおりです。 値説明 noneデフォルト値。ボーダーを表示しませ