コピペで使える JavaScript逆引きリファレンス

JavaScript/jQuery開発時に、こそっとお使いください。

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のパラメータを取得する

JavaScriptでURLのパラメータを取得するには、 window.location.searchを使用します。 U ...

[JavaScript] ブラウザのサイズを取得する

表示中のブラウザのサイズを取得するには、 window.outerWidth / window.outerHeightま ...

[JavaScript] 四捨五入、切り捨て、切り上げを行う

四捨五入、切り捨て、切り上げを行うサンプルです。 四捨五入を行う 四捨五入は、Math.roundを使用します。 [cr ...

[JavaScript] ボタンにclickイベントを設定する

ボタンにclickイベントを設定するサンプル2パターンのサンプルです。 サンプルソース 例1)ボタンタグにonclick ...

[JavaScript] 時間のコロン編集を行うテキストボックス

フォーカスインすると「HHmm」形式、フォーカスアウトすると「HH:mm」形式にするテキストボックスサンプルです。 時間 ...

スポンサーリンク