style.borderStyleは、要素のスタイル属性のborder-styleプロパティの値を取得、もしくは、設定するプロパティ。
border-styleプロパティは、要素の４辺の枠線のスタイルを指定することができる。
構文
取得
var $borderStyle = $elementReference.style.borderStyle;
戻り値
要素のスタイル属性のborder-styleプロパティの値。
設定
$elementReference.style.borderStyle = "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit";
- none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
- 枠線のスタイルを指定。
- 下記の何れかの方法で指定する。初期設定値は、「none」。
- none：枠線なし。
- hidden：枠線なし。
- dotted：点線の枠線。
- dashed：破線の枠線。
- solid：実線の枠線。
- double：二重線の枠線。
- groove：溝線の枠線。
- ridge：隆起線の枠線。
- inset：要素全体が窪んでいるように見せる枠線。
- outset：要素全体が隆起しているように見せる枠線。
- inherit：親要素の枠線のスタイルを継承。
サンプル
サンプルボックス要素
変更後のborder-styleプロパティの値：
サンプルの動作について
- 「設定（なし）」ボタンをクリックすると、「サンプルボックス要素」の枠線をなくし、「変更後のborder-styleプロパティの値：」の右横に「none」と表示する。
- 「設定（点線）」ボタンをクリックすると、「サンプルボックス要素」の枠線を点線にし、「変更後のborder-styleプロパティの値：」の右横に「dotted」と表示する。
- 「設定（破線）」ボタンをクリックすると、「サンプルボックス要素」の枠線を破線にし、「変更後のborder-styleプロパティの値：」の右横に「dashed」と表示する。
- 「設定（実線）」ボタンをクリックすると、「サンプルボックス要素」の枠線を実線にし、「変更後のborder-styleプロパティの値：」の右横に「solid」と表示する。
- 「設定（二重線）」ボタンをクリックすると、「サンプルボックス要素」の枠線を二重線にし、「変更後のborder-styleプロパティの値：」の右横に「double」と表示する。
- 「設定（点線と破線）」ボタンをクリックすると、「サンプルボックス要素」の上下の枠線を点線、左右の枠線を破線にし、「変更後のborder-styleプロパティの値：」の右横に「dotted dashed」と表示する。
- 「設定（実線、点線、二重線、破線）」ボタンをクリックすると、「サンプルボックス要素」の上の枠線を実線、右の枠線を点線、下の枠線を二重線、右の枠線を破線にし、「変更後のborder-styleプロパティの値：」の右横に「solid dotted double dashed」と表示する。
- 「設定（溝線）」ボタンをクリックすると、「サンプルボックス要素」の枠線を溝線にし、「変更後のborder-styleプロパティの値：」の右横に「groove」と表示する。
- 「設定（隆起線）」ボタンをクリックすると、「サンプルボックス要素」の枠線を隆起線にし、「変更後のborder-styleプロパティの値：」の右横に「ridge」と表示する。
- 「設定（窪む）」ボタンをクリックすると、「サンプルボックス要素」全体が窪んでいるように見せる枠線にし、「変更後のborder-styleプロパティの値：」の右横に「inset」と表示する。
- 「設定（隆起）」ボタンをクリックすると、「サンプルボックス要素」全体が隆起しているように見せる枠線にし、「変更後のborder-styleプロパティの値：」の右横に「outset」と表示する。
- 「設定（継承）」ボタンをクリックすると、「サンプルボックス要素」の枠線のスタイルを親要素から継承し、「変更後のborder-styleプロパティの値：」の右横に「inherit」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setBorderStyle( $borderStyle ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.borderStyle = $borderStyle;
var $borderStyle = $elementReference.style.borderStyle;
document.getElementById( "sampleOutput" ).innerHTML = $borderStyle;
}
</script>
function setBorderStyle( $borderStyle ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.borderStyle = $borderStyle;
var $borderStyle = $elementReference.style.borderStyle;
document.getElementById( "sampleOutput" ).innerHTML = $borderStyle;
}
</script>
HTML
<div id="sample" style="border: 5px solid red;background-color: yellow; margin: 10px 0; width: 300px; height: 200px;"> サンプルボックス要素</div>
<button onclick="setBorderStyle('none');">設定（なし）</button>
<button onclick="setBorderStyle('dotted');">設定（点線）</button>
<button onclick="setBorderStyle('dashed');">設定（破線）</button>
<button onclick="setBorderStyle('solid');">設定（実線）</button>
<button onclick="setBorderStyle('double');">設定（二重線）</button>
<br />
<button onclick="setBorderStyle('dotted dashed');">設定（点線と破線）</button>
<button onclick="setBorderStyle('solid dotted double dashed');">設定（実線、点線、二重線、破線）</button>
<br />
<button onclick="setBorderStyle('groove');">設定（溝線）</button>
<button onclick="setBorderStyle('ridge');">設定（隆起線）</button>
<button onclick="setBorderStyle('inset');">設定（窪む）</button>
<button onclick="setBorderStyle('outset');">設定（隆起）</button>
<button onclick="setBorderStyle('inherit');">設定（継承）</button>
<p>変更後のborder-styleプロパティの値：<span id="sampleOutput"></span></p>
<button onclick="setBorderStyle('none');">設定（なし）</button>
<button onclick="setBorderStyle('dotted');">設定（点線）</button>
<button onclick="setBorderStyle('dashed');">設定（破線）</button>
<button onclick="setBorderStyle('solid');">設定（実線）</button>
<button onclick="setBorderStyle('double');">設定（二重線）</button>
<br />
<button onclick="setBorderStyle('dotted dashed');">設定（点線と破線）</button>
<button onclick="setBorderStyle('solid dotted double dashed');">設定（実線、点線、二重線、破線）</button>
<br />
<button onclick="setBorderStyle('groove');">設定（溝線）</button>
<button onclick="setBorderStyle('ridge');">設定（隆起線）</button>
<button onclick="setBorderStyle('inset');">設定（窪む）</button>
<button onclick="setBorderStyle('outset');">設定（隆起）</button>
<button onclick="setBorderStyle('inherit');">設定（継承）</button>
<p>変更後のborder-styleプロパティの値：<span id="sampleOutput"></span></p>