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

HTML DOM Styleのborderプロパティとは？構文・パラメータ・実装例をわかりやすく解説

HTML DOM の Style border プロパティは、要素のボーダー（境界線）に関する設定を取得または変更するために使用されるプロパティです。このプロパティは、border-width（幅）、border-style（スタイル）、border-color（色）の3つの値をまとめて指定できるショートハンド（一括指定）プロパティです。

構文（Syntax）

border プロパティを設定する場合の基本的な構文は以下の通りです。

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

パラメータ（Parameters）

各パラメータの意味は次の表の通りです。

番号パラメータと説明
1Width（幅）
ボーダーの太さを設定します。例：1px、2px、thin、medium、thick など。
2Style（スタイル）
ボーダーの種類を設定します。例：solid（実線）、dotted（点線）、dashed（破線）、double（二重線）など。
3Color（色）
ボーダーの色を設定します。カラーネームやカラーコードで指定できます。
4Initial（初期値）
このプロパティをデフォルトの初期値に戻します。
5Inherit（継承）
親要素のプロパティ値を継承して適用します。

実装例（Example）

ここでは、画像のボーダーを JavaScript から動的に変更するサンプルを見てみましょう。初期状態ではオレンジ色の実線ボーダーが設定されており、ボタンをクリックするとピンク色の点線に変化します。

<!DOCTYPE html>
<html>
<head>
<style>
   #IMG1 {
      border: 2px solid orange;
      box-shadow: 2px 2px 4px 1px seagreen;
   }
</style>
<script>
   function changeBorder(){
      document.getElementById("IMG1").style.border="4px dotted pink";
      document.getElementById("Sample").innerHTML="画像のボーダーが変更されました";
   }
</script>
</head>
<body>
<h2>XAMARIN を学ぼう</h2>
<img id="IMG1" src="https://www.tutorialspoint.com/xamarin/images/xamarin-minilogo.jpg">  
<p>下のボタンをクリックすると、上の画像のボーダーが変わります</p>
<button onclick="changeBorder()">CHANGE BORDER</button>
<p id="Sample"></p>
</body>
</html>

出力結果（Output）

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM Styleのborderプロパティとは？構文・パラメータ・実装例をわかりやすく解説

「CHANGE BORDER」ボタンをクリックすると、画像のボーダーが「4px dotted pink」に変更され、以下のように表示されます。

HTML DOM Styleのborderプロパティとは？構文・パラメータ・実装例をわかりやすく解説

まとめ

DOM の style.border プロパティを使えば、JavaScript だけで要素のボーダーの幅・スタイル・色を一度に操作できます。ユーザーの操作に応じて見た目を動的に変えたい場合など、インタラクティブな Web ページ制作において非常に便利なプロパティです。


  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デフォルト値。ボーダーを表示しませ