JavaScript

[JavaScript] 枠線を設定する

投稿日:2016年12月1日 更新日:

JavaScriptで枠線を設定するサンプルです。

サンプルソース

例)ボタンを押すごとにid="target"要素の枠線を切り替える

実行サンプル

ボタンを押すと、枠線のあり/なしが切り替わります。

あいうえお

解説

  • 枠線に指定できる項目には、太さ、スタイル、色 があります。
  • 枠線に指定できる場所には、上下左右、上、左、右、下 があります。
  • 指定方法には下記欄をご覧ください。

枠線に関するパラメータと値

枠線に関するパラメータと値には以下のものがあります。

【色に関する設定】
パラメータ意味設定例
style.borderColor上下左右の枠線の色を指定する"blue"
"#0000ff"
style.borderTopColor上の枠線の色を指定する
style.borderLeftColor左の枠線の色を指定する
style.borderRightColor右の枠線の色を指定する
style.borderBottomColor下の枠線の色を指定する
【スタイルに関する設定】
パラメータ意味設定例
style.borderStyle上下左右の枠線のスタイルを指定する"solid"
"double"
"groove"
"ridge"
"inset"
"outset"
"dashed"
"dotted"
style.borderTopStyle上の枠線のスタイルを指定する
style.borderLeftStyle左の枠線のスタイルを指定する
style.borderRightStyle右の枠線のスタイルを指定する
style.borderBottomStyle下の枠線のスタイルを指定する
【幅に関する設定】
パラメータ意味設定例
style.borderWidth上下左右の枠線の幅を指定する"3px"
"thin"
"medium"
"thick"
style.borderTopWidth上の枠線の幅を指定する
style.borderLeftWidth左の枠線の幅を指定する
style.borderRightWidth右の枠線の幅を指定する
style.borderBottomWidth下の枠線の幅を指定する
【枠線一括設定に関する設定】
パラメータ意味設定例
style.border上下左右の枠線の色/幅/スタイルを同時に指定する"1px solid gray"
style.borderTop上の枠線の色/幅/スタイルを同時に指定する
style.borderLeft左の枠線の色/幅/スタイルを同時に指定する
style.borderRight右の枠線の色/幅/スタイルを同時に指定する
style.borderBottom下の枠線の色/幅/スタイルを同時に指定する


スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] ステータスバーにメッセージを表示する(window.status、window.defaultStatus)

ステータスバーにメッセージを表示するには、 window.status、window.defaultStatus を使用 ...

[JavaScript] 配列の最後の要素を取り出す(.pop)

配列の最後の要素を取り出すには、.pop()を使用します。 サンプルソース 例)配列の末尾の要素を取得する [crayo ...

[JavaScript] セレクトボックスの選択中のインデックス番号を取得する

セレクトボックスの選択中のインデックス番号を取得するサンプルです。 サンプルソース 例)ボタンを押すと、セレクトボックス ...

[JavaScript] id名からオブジェクトを取得する

タグに付けられたid名からオブジェクトを取得するには、 document.getElementByIdを使用します。 サ ...

[JavaScript] オートコンプリート付のテキストボックスを生成する

オートコンプリート付のテキストボックスを生成するサンプルです。 サンプルソース 例)オートコンプリート付のテキストボック ...

スポンサーリンク