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を変更したい
といった具合です。
どうぞ宜しくお願いいたします。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
No.4です。
すいません。
動かすとは全然言ってませんでしたね。
以下の部分を変更すればCSSを単純に書き換えます。
//cssの「width」を変更
$('#abcBtn .b').css('width','100px');
$('#abcBtn .c').css('width','100px');
$('#abcBtn .a').css('width','100px');
No.4
- 回答日時:
以下、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>
No.3
- 回答日時:
CSSの変更に関しては
http://wiki.bit-hive.com/tomizoo/pg/Javascript%2 …
こちらが参考になるかと思います。
>ほぼ同時に
基本的にレンダリング(結果の実画面への反映)は一連の処理が終わってから行われるます。
処理の間にJavascriptパーサの実行を中断するような処理(alert等)が入ってなければどういう順番でも変更結果は同時に反映されます。
No.2
- 回答日時:
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 …
No.1
- 回答日時:
>javascriptでcssを書き換える方法
要素のclassNameを変更することでスタイルを変更する方法と、直接個々の要素のstyleを変更する方法があります。
さらには、CSSを直接書き換えることも不可能ではありません。
いずれの方法でも要素のスタイルは変更されますが、他の要素との関係やその後の処理などの関係から、どの方法を採用するのが良いのかはおのずと決まってくると思われます。
>Aボタンを押した場合、bかcのcssを最初に書き換えてからAのcssを変更したい
そのタイムラグの間に何らかのユーザとのやり取りがあるのか、○○秒後に最後の書き換えを行なうとかなどの遅延要素がないのなら、順番がどうでも人間から見たら変わらないのではないですか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- JavaScript JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えてほしいです 2 2023/08/25 21:43
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Galleriffic のレイアウトについて
-
macかwinか判別しスタイルシー...
-
特定の条件のHTML要素を一括で...
-
ようやくここまできました
-
2回目以降のページロード時には...
-
【HP作成】 移動できる画像に...
-
jqueryの動作について教えてく...
-
$ajaxではない抽出データを表示...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
CloseとDisposeの違い
-
Excelシート上のマクロを登録し...
-
VBAでループ内で使う変数名を可...
-
エクセルVBAで、MsgBox やInput...
-
VBA エンターキーでイベントに...
-
DoEventsがやはり分からない
-
アクセスVBAのMe!と[ ]
-
switch の範囲指定
-
「PC Helpsoft Driver Updated...
-
Excel VBAでマウスの左クリック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
動画の上に広告をオーバーレイ...
-
CSSでreadonlyの機能はあり...
-
jQueryでのドラッグアンドドロ...
-
formのsubmitを押すとモーダル...
-
Q&A掲示板の入力フォームに文字...
-
jqueryを使ったスムーススクロ...
-
確認ダイアログを次からは表示...
-
javascriptで複数の表示・非表...
-
javascriptのエラーで質問です。
-
特定の条件のHTML要素を一括で...
-
macかwinか判別しスタイルシー...
-
【JavaScript】検索がヒットし...
-
jQueryのSlickで矢印アイコンが...
-
javascriptでの(-)ハイフンの処...
-
クリックすると、色が変わるよ...
-
時間帯によってclass名を変更し...
-
フォームで「パスワード(確認...
-
3重のクォーテーション
-
SITEINFOの書き方について
-
【至急!!】Jqueryを使った下記...
おすすめ情報