style.borderTopStyleプロパティ

style.borderTopStyleは、要素のスタイル属性のborder-top-styleプロパティの値を取得、もしくは、設定するプロパティ。

border-top-styleプロパティは、要素の上の枠線のスタイルを指定することができる。

構文

取得

var $borderTopStyle = $elementReference.style.borderTopStyle;

戻り値

要素のスタイル属性のborder-top-styleプロパティの値。

設定

$elementReference.style.borderTopStyle = "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-top-styleプロパティの値:

サンプルの動作について

  • 「設定(なし)」ボタンをクリックすると、「サンプルボックス要素」の上の枠線をなくし、「変更後のborder-top-styleプロパティの値:」の右横に「none」と表示する。
  • 「設定(点線)」ボタンをクリックすると、「サンプルボックス要素」の上の枠線を点線にし、「変更後のborder-top-styleプロパティの値:」の右横に「dotted」と表示する。
  • 「設定(破線)」ボタンをクリックすると、「サンプルボックス要素」の上の枠線を破線にし、「変更後のborder-top-styleプロパティの値:」の右横に「dashed」と表示する。
  • 「設定(実線)」ボタンをクリックすると、「サンプルボックス要素」の上の枠線を実線にし、「変更後のborder-top-styleプロパティの値:」の右横に「solid」と表示する。
  • 「設定(二重線)」ボタンをクリックすると、「サンプルボックス要素」の上の枠線を二重線にし、「変更後のborder-top-styleプロパティの値:」の右横に「double」と表示する。
  • 「設定(溝線)」ボタンをクリックすると、「サンプルボックス要素」の上の枠線を溝線にし、「変更後のborder-top-styleプロパティの値:」の右横に「groove」と表示する。
  • 「設定(隆起線)」ボタンをクリックすると、「サンプルボックス要素」の上の枠線を隆起線にし、「変更後のborder-top-styleプロパティの値:」の右横に「ridge」と表示する。
  • 「設定(窪む)」ボタンをクリックすると、上の枠線を「サンプルボックス要素」全体が窪んでいるように見せる枠線にし、「変更後のborder-top-styleプロパティの値:」の右横に「inset」と表示する。
  • 「設定(隆起)」ボタンをクリックすると、上の枠線を「サンプルボックス要素」全体が隆起しているように見せる枠線にし、「変更後のborder-top-styleプロパティの値:」の右横に「outset」と表示する。
  • 「設定(継承)」ボタンをクリックすると、「サンプルボックス要素」の上の枠線のスタイルを親要素から継承し、「変更後のborder-top-styleプロパティの値:」の右横に「inherit」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setBorderTopStyle( $borderTopStyle ) {
 var $elementReference = document.getElementById( "sample" );
 $elementReference.style.borderTopStyle = $borderTopStyle;
 var $borderTopStyle = $elementReference.style.borderTopStyle;
 document.getElementById( "sampleOutput" ).innerHTML = $borderTopStyle;
}
</script>

HTML

<div id="sample" style="border: 5px solid red;background-color: yellow; margin: 10px 0; width: 300px; height: 200px;"> サンプルボックス要素</div>
<button onclick="setBorderTopStyle('none');">設定(なし)</button>
<button onclick="setBorderTopStyle('dotted');">設定(点線)</button>
<button onclick="setBorderTopStyle('dashed');">設定(破線)</button>
<button onclick="setBorderTopStyle('solid');">設定(実線)</button>
<button onclick="setBorderTopStyle('double');">設定(二重線)</button>
<br />
<button onclick="setBorderTopStyle('groove');">設定(溝線)</button>
<button onclick="setBorderTopStyle('ridge');">設定(隆起線)</button>
<button onclick="setBorderTopStyle('inset');">設定(窪む)</button>
<button onclick="setBorderTopStyle('outset');">設定(隆起)</button>
<button onclick="setBorderTopStyle('inherit');">設定(継承)</button>
<p>変更後のborder-top-styleプロパティの値:<span id="sampleOutput"></span></p>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, プロパティ, ボーダー, リファレンス パーマリンク