ボタンの色をjqueryで変更できません

質問

jQuery('#bgcolor-ch').css('background-color','#ff0000');

上記命令で下のボタンの背景色が変わりません。

<input type="submit" value="さぶみっと" id="bgcolor-ch" />

何がいけないのでしょうか？

回答No.3

ques9900 · ベストアンサー

実際に試してみましたが、
jQuery('#bgcolor-ch').css('background-color','#ff0000');
ボタンの色は変わりました。
コード単体では問題ありません。

もしかしたらコードが実行されていないのかもしれませんね。
jQuery('#bgcolor-ch').css('background-color','#ff0000');
console.log('色変更');
というようにしてコンソールに「色変更」と表示されていれば実行されています。

$(document).ready( function(){
jQuery('#bgcolor-ch').css('background-color','#ffff00');
});
上記3行はページ読み込み後に実行されます。

これでもダメな場合は、
jQuery('#bgcolor-ch').css('background-color','#ffff00');
で色変更された後に、色を戻している何者かがいると思います。

もしくはcss優先度で!importantですね。

お礼

$(document).ready( function(){
まさにこれで一発解決でした。
いつもはおまじないのように
jQuery(function(){
で意味も解らず囲っていましたが今回は入れ忘れていました。上記と同じ意味だったのですね。。
確かに、HTMLが読まれていないのにHTMLを変更するJavascriptなんて実行しても意味ないですね。
回答頂いた皆さんが正解でしたのでベストアンサーに悩みましたが、より詳細に記して頂いたこちらの回答を選ばせて頂きました。
助かりました！本当にありがとうございました。

回答No.2

ques9900

お使いのブラウザを追記すると、ヒントになるかもしれません。

「!important」を使用して優先度上げてみるというのはいかがでしょう。
jQuery('#bgcolor-ch').css('background-color','#ff0000 !important');
Chromeの要素を検証で、cssを確認するのもありかもです。

<input type="submit" value="さぶみっと" id="bgcolor-ch" />がDOMにない状態で
jQuery('#bgcolor-ch').css('background-color','#ff0000');が実行されているかもしれません。
先の方の言われている順序の問題よくはまります。

お礼

!importantのアドバイスありがとうございます！その手もありますね。
仰るとおりDOMに無い状態での実行だったようです。

回答No.1

kosukejlampnet

<input type="text" style="background-color: #000;" />
こう書いたときには意図した通りに変わりますので、input が背景色を設定する機能を持っていることは間違いありませんから、悪いのは
jQuery('#bgcolor-ch').css('background-color','#ff0000');
を実行するタイミングのせいだと思います。

お礼

まさに実行するタイミングでした。本当にありがとうございました。