[JavaScript] 枠線を設定する

投稿日：2016年12月1日更新日：2018年4月28日

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

サンプルソース

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

function changeBorder(idname){
  var obj = document.getElementById(idname);
  if(obj.style.borderWidth == "1px"){
    obj.style.borderWidth = "0px";
  }else{
    obj.style.border = "solid 1px blue";
  }
}

function changeBorder(idname){

var obj = document.getElementById(idname);

if(obj.style.borderWidth == "1px"){

obj.style.borderWidth = "0px";

}else{

obj.style.border = "solid 1px blue";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <p id="target">あいうえお</p>
  <input type="button" value=" ボタン " onclick="changeBorder('target');" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p id="target">あいうえお</p>

</body>

</html>

実行サンプル

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

あいうえお

解説

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

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

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

【色に関する設定】
パラメータ	意味	設定例
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	下の枠線の色/幅/スタイルを同時に指定する

執筆者：とら