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] 半角(ASCII)文字チェックを行う

半角文字チェックを行うサンプルFunctionです。 サンプルソース 例)値が半角英数記号の場合はtrueを返す(空文字 ...

[JavaScript] 2つの日付の差を日数で求める

2つの日付の差を日数で求めるサンプルです。 サンプル 例)2016年1月1日~2016年6月30日の日数を求める [cr ...

[JavaScript] 10進表記のカラーコードを16進表記に変換する

10進表記のカラーコードを16進表記に変換したい場合にご利用ください。 10進表記のカラーコードを16進表記に変換する ...

[JavaScript] 配列から要素を取得する

配列から要素を取得するサンプルです。 指定したインデックスの要素を取得する 要素を取得するには、配列番号で取得します。 ...

[JavaScript] 横位置を指定する(style.textAlign)

JavaScriptで横位置を指定するには、style.textAlignを使用します。 サンプルソース 例)ボタンを押 ...

スポンサーリンク