jQuery でスタイルを操作する

前回の jQuery のプログラムを修正して、エラーのときは赤文字で出力するように変更してみましょう。

$(":button").on("click", function () {
  var inRadix = parseInt($('[name = "inRadix"]:checked').val());
  var outRadix = parseInt($('[name = "outRadix"]:checked').val());

  var input = $("#input").val();
  var output;
  var color;

  if(validate(input, inRadix)) {
    output = parseInt(input, inRadix).toString(outRadix).toUpperCase();
    color = "black";
  } else {
    output = "Error!";
    color = "red";
  }

  $("#output").val(output).css("color", color);
});

function validate(str, radix) {
  switch(radix) {
    case 2:
      return str.match(/^[0-1]+$/);
    case 8:
      return str.match(/^[0-7]+$/);
    case 16:
      return str.match(/^[0-9a-fA-F]+$/);
    default:
      return str.match(/^[0-9]+$/);
  }
}

css という新たな関数が出てきました。これは第一引数に操作したい CSS のプロパティ、第二引数に値を入れて使います。第二引数には関数も渡せます。

注意すべき点としては、例えば background-color を操作したいときは JavaScript のスタイルプロパティ風に

.css("backgroundColor", ...)

のようにも書ける点です。

正常出力のときに

.css("color", "black")

をセットしていますが、これはエラー出力の後に正常出力がなされた時に赤文字のまま出力されるのを回避するためです。

複数のプロパティを一度に操作するときは

.css({
  "color" : ... ,
  "background-color" : ...
})

あるいは

.css({
  color : ... ,
  backgroundColor : ...
})

のように書きます。