- ベストアンサー
ボタンの色をjqueryで変更できません
kosukejlampnetの回答
- kosukejlampnet
- ベストアンサー率44% (126/282)
<input type="text" style="background-color: #000;" /> こう書いたときには意図した通りに変わりますので、input が背景色を設定する機能を持っていることは間違いありませんから、悪いのは jQuery('#bgcolor-ch').css('background-color','#ff0000'); を実行するタイミングのせいだと思います。
関連するQ&A
- jQueryを使ってスタイルの変更
----- 実現したいこと ----------------------------- 以下をjQueryを使って実現したいです。 ・「名前」のうちどれか１つが選択されたら 「名前」の背景を白くする。(「名前」ulタグのbackground-colorを#ffffffへ) ・「季節」のうちどれか１つが選択されたら 「季節」の背景を白くする。(「季節」ulタグのbackground-colorを#ffffffへ) 方針だけでもご教授いただければ幸いでございます。 ----- ソース ------------------------------------- <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> </script> </head> <body> □名前<br> <ul style="background-color:#ff0000;"> <input type="checkbox" value="1">一郎<br> <input type="checkbox" value="2">二郎<br> <input type="checkbox" value="3">三郎 </ul> <br> <br> <br> □季節<br> <ul style="background-color:#ff0000;"> <input type="checkbox" value="1">春<br> <input type="checkbox" value="2">夏<br> <input type="checkbox" value="2">秋<br> <input type="checkbox" value="2">冬 </ul> </body> </html>
- ベストアンサー
- JavaScript
- 選択によってsubmitボタンの色を変える
先程関連質問の回答をいただいた者なのですが、ラジオボタンの内容によってsubmitボタンの色を変えるところまで実現したいのですが、東京ならsubmitボタンはピンク、大阪ならsubmitボタンはブルーにしたいと思います。この場合は、submitボタンのところでIF文で分岐させればいいものでしょうか。 <html> <head> <script Language="JavaScript"> <!-- function set( n ) { document.myFORM.Submit.value = document.myFORM.elements[n].value; } // --> </script> </head> <body onLoad="set(0);"> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onClick="set(0);" STYLE="background-color:pink" checked> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪" onClick="set(1);" STYLE="background-color:blue"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★" STYLE="background-color:pink"> </form> </body> </html>
- ベストアンサー
- JavaScript
- jquery、javascriptについて
あるdivエリア内をクリックすると、特定のチェックボックスに チェックが入るということをしています。 （チェックボックスにチェックを入れるとdiv内の色が変わります。） つまり、divとチェックを連動させたいのです。 その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、 もっと簡単にまとめる方法はないのでしょうか？ さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名で あわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。 そんなことができるのでしょうか？ 具体的に教えていただけると幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jqueryの色値取得について質問です。
JQueryで、SPAN要素を作成し色情報を色名で取り出したいのですが、 $('<span style="color: blue; background-color: blue"></span>').css("color") とすると値が"blue"と返ってくるのですが、 $('<span style="color: blue; background-color: blue"></span>').css("background-color") では、"rgb(0, 0, 255)"とRGB表記になって返ってきてしまいます。どうすれば色名の"blue"で取得できるのでしょうか？ブラウザはFirefox限定でお願いします。色テーブルを作って変換することなしにできないでしょうか？ どうかお知恵を下さい。
- ベストアンサー
- JavaScript
- ラジオボタンのバックグランドカラーについて。
いつもお世話になっております。 Livedoor にて BBS を開設している者です。 BBS のデザイン上下記の様にしています。 <body> <INPUT style="BACKGROUND: #ff0000" type="radio" name="etc1" value="#ff0000" checked> <INPUT style="BACKGROUND: #00ff00" type="radio" name="etc1" value="#00ff00"> <INPUT style="BACKGROUND: #0000ff" type="radio" name="etc1" value="#0000ff"> </body> ところが、MAC IE 5.1 では上手く表示されないみたいです。 ボーダーカラーを変えてみたらと教えてもっらたのですが、 どの様にしたら良いのかわかりません。 HLMT 初心者ですよしくお願い致します。
- ベストアンサー
- HTML
- PHPを使用してバックグランドカラーを変更できません
PHPを使用してバックグランドカラーを変更しようとしています。フォームのテキストボックスに入力した色コードを、ボタンを押すことで再着色しようとしています。 一回目は大丈夫ですが、二回目以降は常に一回目の色になってしまい、困っております。お助けくださいm(_ _)m ブラウザのアドレスバーを見ますと、 一回目は色コード"ff0000"を指定し、 http://localhost/practice/phpself.php?bgcolor=ff0000 となっており、 二回目は色コード"0000ff"を指定し、やはり http://localhost/practice/phpself.php?bgcolor=ff0000 となっております。 ?以降を手動で消してやれば再着色可能なのですが・・・ 環境はPHP4.4.1+Apache1.3.34+Win2000SP4です。 ソースは以下のとおりです。よろしくお願いします。。。 <html> <head> <title>サンプル</title> </head> <body> <? $bgcolor = $_GET[bgcolor]; if($bgcolor == ""){ print("<body bgcolor=\"#ffffff\">"); }else{ print("<body bgcolor=\"#".$bgcolor."\""); } ?> <form method="GET" action="<? print($PHP_SELF); ?>"> <input type="text" name="bgcolor"><br> <input type="submit" value="色を入力して押して"> </form> </body> </html>
- ベストアンサー
- PHP
- jquery の clickイベント
いつもお世話になっております。 当方jQueryは初めてで試行錯誤しながら使っています。 標題について質問です。 <form> <input type="text" id="code[1]" value="00001"> <input type="submit" id="add[1]"> <input type="submit" id="del[1]"> </form> 上記のフォーム文で、 jQuery.noConflict(); jQuery(document).ready(function($){ $("input").click(function(){ var e = $(this).attr("id"); }); }); とし、上のform文を直接書いた場合は押されたボタンが認識されるのですが、 form文をajax通信でinnerHTMLで出力されたボタンを押した時は ボタンを押してもイベントを認識してくれません。 これはinnerHTMLで出力しているからなんでしょうか。 何度やっても分からず質問させて頂きました。 以上、宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQuery.illuminateの使い方
jquery.illuminateを使って、ボタンを点滅させようとしています。 あるサイトのサンプルコーディングを参考にして、作ってみました。 実行させると、jquery.illuminateの中の rgb2hex（）で「１」が無効のエラーが出ます。 具体的には、下の original_color = rgb2hex(obj.css('background-color'));で、 cssのbackground-colorが亘っていないためのようで、 return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);がエラーとなってしまいます。 return this.each(function() { obj = $(this); if(obj.is("input")){ if(obj.css('border') == ''){ obj.css('border', 'none') }; } dead = false; original_color = rgb2hex(obj.css('background-color')); } function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } プログラムコーディングを一部割愛して表示します。 どこが間違っているのか教えてください。 よろしくお願いします。 <html> <head> <title>工事実行予算管理システム</title> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/kjiact.css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"> <jsp:useBean id="MNT2000_00Form" scope="request" class="jp.co.nics.kjiact.web.MNT2000_00Form" /> <Script type="text/javascript" src="common/jquery-1.9.1.js"> </Script> <Script type="text/javascript" src="common/jquery-ui-1.10.2.custom.min.js"> </Script> <Script language="JavaScript" src="common/jquery.illuminate.0.7.js"> </Script> <Script language="JavaScript"> $('#next_btn').illuminate(); </Script> <!-- CSS --> <style media="screen,projection" type="text/css"> #next_btn { background:#333333; padding:20px; color:#ffffff; width:400px; } </style> </head> <body > <td width="15%" align="left"> <div id="next_btn"><input type="button" class="next_btn" name="next" value="次へ（代価表）" onClick="toDetail();"/></div></td> </body> </html>
- 締切済み
- JavaScript
- HTMLのボタンについて質問です。
現在、ボタンを押したら背景色が変わるプログラムを作成中ですが、うまく切り替わりません。自分としては、value=1をあらかじめ設定しておき、そこで押される度に関数内で、valueの値をプラスしていき、if文で切り替えられるのかなと考えました。 どなたかわかる方おりましたら、回答ください。 またbuttonのvalueなど勝手に増やしても大丈夫なのでしょうか？ それとも増やせないのでしょうか？ <html> <head> <title>element.childNodes - エレメントの子ノードリストを取得</title> </head> <body> <p id="hoge">OASIS</p> <script type="text/javascript"> function change(){ var c=document.getElementById("submit").value; if(c%2==0){ document.body.bgColor="red"; } else{ document.body.bgColor="black"; } c++; //document.body.bgColor="red"; } </script> <input type="button" id="submit" value="1" onclick="change()"> </body> </html>
- ベストアンサー
- HTML
- Input Type Buttonの色の変え方
<INPUT type="button" name="BUTTON02" value="テスト" style="color: white;background-color:black;border-color: red;"> これ↑とこれ↓サンプルカラーで何度か試してみましたが、色が変わりませんでした。 <INPUT type="button" name="BUTTON02" value="テスト" style="color: #99CC99 ;background-color:#990033;border-color: #9933FF;"> どこが違うのでしょうか？ お手数をお掛け致しますが、宜しくお願い致します。
- 締切済み
- その他（インターネット・Webサービス）
お礼
まさに実行するタイミングでした。本当にありがとうございました。