- 締切済み
javascriptでcssを書き換える方法
javascriptでcssを書き換える方法 A,B,Cと三つのボタンがありa,b,cそれぞれのcssを書き換えたいと思っております。 ただclass="a b"といった具合に複数設定されている場合があるので 押したボタンと関連づいているcssを最後に書き換えたいのですが、 どなたかご教授ください。 例） Aボタンはクラスaと関連づいていて Bボタンはクラスbと関連づいていて Cボタンはクラスcと関連づいていて Aボタンを押した場合、bかcのcssを最初に書き換えてからAのcssを変更したい Bボタンを押した場合、aかcのcssを最初に書き換えてからBのcssを変更したい Cボタンを押した場合、aかbのcssを最初に書き換えてからCのcssを変更したい といった具合です。 どうぞ宜しくお願いいたします。
- hunter_999
- お礼率19% (31/161)
- JavaScript
- 回答数5
- ありがとう数18
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- utun01
- ベストアンサー率40% (110/270)
No.4です。 すいません。 動かすとは全然言ってませんでしたね。 以下の部分を変更すればCSSを単純に書き換えます。 //cssの「width」を変更 $('#abcBtn .b').css('width','100px'); $('#abcBtn .c').css('width','100px'); $('#abcBtn .a').css('width','100px');
- utun01
- ベストアンサー率40% (110/270)
以下、jQueryを使用した方法になります。 クラスが複数設定されているとのことですが、 ご提示の内容ではよくわからなかったので、これで出来ない場合は もう少し詳細な内容で質問されるといいかもしれません。 ていうか、順番に動かすってこういうことでいいのかな？ ※Aボタンしか作っていません <html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#abcBtn input').click(function(){ if($(this).attr('class').indexOf('a') != -1){ //cssの「width」を変更 $('#abcBtn .b').animate({'width':'100px'},500,function(){ $('#abcBtn .c').animate({'width':'100px'},500,function(){ $('#abcBtn .a').animate({'width':'100px'},500); }); }); } else if($(this).attr('class').indexOf('b') != -1) { //上と同様 } else { //上と同様 } }); }); </script> <body> <form id='abcBtn'> <input type='button' class='a' value='A'/> <input type='button' class='b' value='B' /> <input type='button' class='c' value='C' /> </form> </body> </html>
- steel_gray
- ベストアンサー率66% (1052/1578)
CSSの変更に関しては http://wiki.bit-hive.com/tomizoo/pg/Javascript%20cssRules こちらが参考になるかと思います。 ＞ほぼ同時に 基本的にレンダリング（結果の実画面への反映）は一連の処理が終わってから行われるます。 処理の間にJavascriptパーサの実行を中断するような処理(alert等)が入ってなければどういう順番でも変更結果は同時に反映されます。
- fujillin
- ベストアンサー率61% (1594/2576)
No1です。 ＞cssを直接書き換えたいと思っております。 なにをどうしたいのかまったく不明なので、ここに全部書くこともできないし、例はこのあたりを参照。 http://wiki.bit-hive.com/tomizoo/pg/Javascript%20cssRules http://ash.jp/web/css/js_style.htm http://d.hatena.ne.jp/amachang/20080425/1209105991 もっと詳しくなら http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/CSS/index.html
- fujillin
- ベストアンサー率61% (1594/2576)
＞javascriptでcssを書き換える方法 要素のclassNameを変更することでスタイルを変更する方法と、直接個々の要素のstyleを変更する方法があります。 さらには、CSSを直接書き換えることも不可能ではありません。 いずれの方法でも要素のスタイルは変更されますが、他の要素との関係やその後の処理などの関係から、どの方法を採用するのが良いのかはおのずと決まってくると思われます。 ＞Aボタンを押した場合、bかcのcssを最初に書き換えてからAのcssを変更したい そのタイムラグの間に何らかのユーザとのやり取りがあるのか、○○秒後に最後の書き換えを行なうとかなどの遅延要素がないのなら、順番がどうでも人間から見たら変わらないのではないですか？
補足
ご回答ありがとうございます。 cssを直接書き換えたいと思っております。 そしてほぼ同時に書き換えたいと思っております。