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] 一定時間後に処理を実行する

一定時間後に処理を実行するには、setTimeoutを使用します。 サンプル 例)5秒後に処理を実行する [crayon ...

[JavaScript] ブランクチェックを行う

指定された値がnullまたは空文字でないことをチェックする関数です。 コピペしてそのままお使い頂けます。 サンプル 例) ...

[JavaScript] 文字列の一部分を選択状態にする

文字列の一部分を選択状態にするサンプルです。 サンプルソース 例)ボタンを押すと、テキストの3文字目~5文字目を選択状態 ...

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

タグに付けられたclass名からオブジェクトを取得するには、 document.getElementsByClassNa ...

[JavaScript] 印刷ダイアログを開く(window.print)

印刷ダイアログを表示するには、window.print()を使用します。 サンプルソース 例)ボタンを押すと、印刷ダイア ...

スポンサーリンク