javascriptでcssを書き換える方法

締切済

質問者：hunter_999
質問日時：2010/06/18 21:14
回答数：5件

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を変更したい
といった具合です。

どうぞ宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： utun01
回答日時：2011/03/13 07:28

No.4です。

すいません。
動かすとは全然言ってませんでしたね。
以下の部分を変更すればCSSを単純に書き換えます。

//cssの「width」を変更
$('#abcBtn .b').css('width','100px');
$('#abcBtn .c').css('width','100px');
$('#abcBtn .a').css('width','100px');

- 0
- 件

通報する

No.4

回答者： utun01
回答日時：2011/03/13 07:12

以下、jQueryを使用した方法になります。

クラスが複数設定されているとのことですが、
ご提示の内容ではよくわからなかったので、これで出来ない場合は
もう少し詳細な内容で質問されるといいかもしれません。
ていうか、順番に動かすってこういうことでいいのかな？

※Aボタンしか作っていません
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/ …
<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>

- 0
- 件

通報する

No.3

回答者： steel_gray
回答日時：2010/06/19 10:54

CSSの変更に関しては

http://wiki.bit-hive.com/tomizoo/pg/Javascript%2 …
こちらが参考になるかと思います。

＞ほぼ同時に
基本的にレンダリング（結果の実画面への反映）は一連の処理が終わってから行われるます。
処理の間にJavascriptパーサの実行を中断するような処理(alert等)が入ってなければどういう順番でも変更結果は同時に反映されます。

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2010/06/18 22:48

No1です。

＞cssを直接書き換えたいと思っております。
なにをどうしたいのかまったく不明なので、ここに全部書くこともできないし、例はこのあたりを参照。
　http://wiki.bit-hive.com/tomizoo/pg/Javascript%2 …
　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-re …

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2010/06/18 21:32

＞javascriptでcssを書き換える方法

要素のclassNameを変更することでスタイルを変更する方法と、直接個々の要素のstyleを変更する方法があります。
さらには、CSSを直接書き換えることも不可能ではありません。

いずれの方法でも要素のスタイルは変更されますが、他の要素との関係やその後の処理などの関係から、どの方法を採用するのが良いのかはおのずと決まってくると思われます。

＞Aボタンを押した場合、bかcのcssを最初に書き換えてからAのcssを変更したい
そのタイムラグの間に何らかのユーザとのやり取りがあるのか、○○秒後に最後の書き換えを行なうとかなどの遅延要素がないのなら、順番がどうでも人間から見たら変わらないのではないですか？