jsのifで条件式にcss文を組み込む。

Question

jsの条件式にcssを組み込みたいです。

実装したい内容は、フォームの色を判別し、ボタンを有効にするということです。

      if($(input).css("background-color")==#78f266){
        $('#button2').prop('disabled', false);
        $('#button2').prop('class', 'btn-primary btn-lg');
      }

このようにコーディングしました。
if文を除けば動くので、if文の中身は問題ないと思います。

Answer 1

if ( $( input ).css( "background-color" ) == '#78f266' ) {
  //                      少なくとも引用符はいる ↑       ↑
}

Comments

[kei344]

ブラウザによって返す値が変わる可能性もあるので、直接colorを指定するのではなくクラスで指定するなどしたほうが良いとは思います。

【.css() | jQuery API Documentation】
https://api.jquery.com/css/
> Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

【.css() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/css/css
> CSSのcolorについてはブラウザによって理論的には同じでもテキストとしては異なる(例：#FFF, #ffffff, rgb(255,255,255))値を返す事がかもしれません。

[watta_00]

if($('input').css("background-color")=='#78f266'){
$('#button2').prop('disabled', false);
$('#button2').prop('class', 'btn-primary btn-lg');
}

このように記述してみましたが、うまく動作しませんでした・・・

ご回答ありがとうございます！

[think49]

外部スタイルシートもしくは、style要素でclass定義しておき、addClass,removeClassでスタイル情報の付けはずしを行う、という意味です。
クロスブラウザだけではなく、セマンティクス/拡張性の面でも、その方が優れています。

[watta_00]

なるほど、、、
勉強になりました！ありがとうございます

Answer 2

まずinputは'input'かと思います。つまりこうですね。

var color = $('input').css("background-color");
console.log( 'colorは「' + color + '」です' );

するとcolorが「rgb」で取得されていることがわかると思います。

なので次のように#78f266でなくrgb(120, 242, 102)で判定するとできると思います。

if( $('input').css("background-color")=='rgb(120, 242, 102)' ){
  $('#button2').prop('disabled', 'false');
  $('#button2').prop('class', 'btn-primary btn-lg');
}

でしょうか。
確認のサンプル→https://jsfiddle.net/d5phszfg/

どうしてもrgb(120, 242, 102)でなく#78f266の形式で判定したければ、「rgb hex 変換」とかで検索するか、それでもわからなければまたお尋ねください。

Comments

[ogyougi]

すみません、kei344さんの仰る方法がよさそうです。

[watta_00]

ogyougiさん
ありがとうございます。rgb値による指定にした結果
うまく動作しました!