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] URLからポート番号を取得する(location.port)

URLからポート番号を取得するには、location.portを使用します。 サンプルソース 例)現在のページのURLか ...

[JavaScript] 文字列をBase64エンコードする(.btoa)

文字列をBase64エンコードには、window.btoa()を使用します。 サンプルソース 例)文字列「abcdefg ...

[JavaScript] 指定した文字の出現数を取得する

文字列中に指定した文字が出現する数を取得するサンプルFunctionです。 サンプルソース 例)指定した文字の出現数を取 ...

[JavaScript] 子要素の件数を取得する(.childElementCount)

子要素の件数を取得するには、.childElementCountを使用します。 サンプルソース 例)リストの数を取得する ...

[JavaScript] 乱数を取得する(Math.random)

乱数を取得するには、Math.random()を使用します。 このメソッドは0以上1未満の小数値を返すので、戻り値を取得 ...

スポンサーリンク