質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2225閲覧

jQueryで背景と文字を同時に変更

torinoto7

総合スコア19

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/20 12:01

jQueryを利用してボタンを押すと背景と文字が同時に変わるWEBを作成しています。
背景はうまく変更できたのですが、文字の色変更に苦戦しています。
どのように追加したら良いでしょうか?
宜しくお願いします。

(jQuery)

jQuery( function() { backgroundColor(); jQuery( '#backgroundColorCoral' ).click( function () { backgroundColor( 'coral' ); } ); jQuery( '#backgroundColorYellow' ).click( function () { backgroundColor( 'yellow' ); } ); jQuery( '#backgroundColorSkyblue' ).click( function () { backgroundColor( 'skyblue' ); } ); function backgroundColor( $backgroundColor ){ if( $backgroundColor == undefined ){ var $backgroundColor = jQuery.cookie( 'backgroundColor' ); if( $backgroundColor == undefined ){ var $backgroundColor = 'yellow'; } } jQuery( '#backgroundColor' ).html( $backgroundColor ); jQuery.cookie( 'backgroundColor', $backgroundColor, { expires: 1 } ); jQuery( '#sample' ).css( { 'backgroundColor': $backgroundColor } ); } } );

(html)

<div id="sample"><p> <span id="backgroundColorCoral">coral</span> <span id="backgroundColorYellow">yellow</span> <span id="backgroundColorSkyblue">skyblue</span> </p> </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

どうせならcssを利用してクラスを付け替えたほうが楽かもしれませんね
(あらかじめ変える色が決まっている場合)

javascript

1<style> 2#sample span#backgroundColorCoral.active {background-Color:coral; color:red;} 3#sample span#backgroundColorYellow.active {background-Color:yellow; color:lime;} 4#sample span#backgroundColorSkyblue.active{background-Color:skyblue;color:aqua;} 5</style> 6<script> 7$( function() { 8 $( '#sample span' ).on('click',function () { 9 $(this).toggleClass('active'); 10 } ); 11} ); 12</script> 13<div id="sample"> 14<p> 15<span id="backgroundColorCoral">coral</span> 16<span id="backgroundColorYellow">yellow</span> 17<span id="backgroundColorSkyblue">skyblue</span> 18</p> 19</div>

修正

全体の色でしたか・・

javascript

1<style> 2body.coral {background-Color:coral; color:red;} 3body.yellow {background-Color:yellow; color:lime;} 4body.skyblue{background-Color:skyblue;color:aqua;} 5</style> 6<script> 7$( function() { 8 $( '#sample [data-color]' ).on('click',function () { 9 $('body').removeClass('coral yellow skyblue').addClass($(this).data('color')); 10 } ); 11} ); 12</script> 13<body> 14<div id="sample"> 15<p> 16hogehogehogehogehoge 17</p> 18<p> 19<span id="backgroundColorCoral" data-color="coral" >coral</span> 20<span id="backgroundColorYellow" data-color="yellow" >yellow</span> 21<span id="backgroundColorSkyblue" data-color="skyblue">skyblue</span> 22</p> 23<p> 24</p> 25</div> 26fugafugafugafugafuga 27</body>

投稿2018/09/21 01:41

編集2018/09/21 12:45
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

torinoto7

2018/09/21 12:34

回答頂き有り難うございました。 内容確認し動作確認を行いました。 画像をクリックするとWEB全体の背景と文字の色が変わる仕組みを作ろうとしていますが、 なかなか思うように行きません。 説明不足で申し訳ないですが操作方法教えて下さい。 宜しくお願いします。
yambejp

2018/09/21 12:45

全体の色を変える修正版をあげておきました
torinoto7

2018/09/21 20:59

早急に回答頂き有り難うございます! 無事に文字の色と背景が同時に変わりました!
guest

0

文字色はCSSのcolorプロパティで変更できます。

jQueryの.css()メソッドは複数のCSSプロパティを一気に渡せます。
http://api.jquery.com/css/

js

1jQuery( '#sample' ).css( { 2 'backgroundColor': $backgroundColor, 3 'color': 設定したい色 4} );

投稿2018/09/20 13:30

spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問