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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

737閲覧

javascriptでクリックしたときに背景色を変えたい

mkscia

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/05/22 17:35

javascriptで要素をクリックしたときに、
<div id="box">の背景色を青から赤にする。
・四角から丸の形にする。

この2つを実行したいのですが、四角から丸にすることは出来たのですが、背景色が
変わってくれません。
どのように改善すればいいのかアドバイスいただけると幸いです。

javascript

1<body> 2 <div id="box"></div> 3 4 5 <style> 6 #box { 7 width: 100px; 8 height: 100px; 9 background: skyblue; 10 margin: 20px; 11 } 12 13 .en { 14 background-color: red; 15 border-radius: 50%; 16 } 17 </style> 18 <script> 19 function change() { 20 var box = document.getElementById('box'); 21 box.classList.add('en'); 22 } 23 24 box.addEventListener('click',change, false); 25 </script> 26 27 <script>

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

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

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

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

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

m.ts10806

2019/05/22 21:39

背景を変える だけの実装は個別にできてますか?
guest

回答3

0

ベストアンサー

CSSはclassよりもidのほうが優先度が高いため
redよりもskyblueのほうが優先されています。

.en#box.enにして優先度を上げれば
クリック時にredが適用されます。

html

1<div id="box"></div> 2<style> 3#box { 4 width: 100px; 5 height: 100px; 6 background: skyblue; 7 margin: 20px; 8} 9 10#box.en { 11 background: red; 12 border-radius: 50%; 13} 14</style> 15<script> 16function change() { 17 var box = document.getElementById('box'); 18 box.classList.add('en'); 19} 20box.addEventListener('click', change); 21</script>

投稿2019/05/22 22:10

yasutomi

総合スコア2937

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

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

mkscia

2019/05/24 16:38

なるほど。idが優先されてたせいで反映されなかったんですね。 enのクラス名に#boxをつけることで、やりたかった処理をすることができました。わかりやすい解説ありがとうございました。 ほかのお二方の意見も大変参考になりました。
guest

0

こういうことでしょうか?
(色変更をanimateするためにuiを利用)

javascript

1<style> 2#box{ 3 width:200px; 4 height:200px; 5} 6</style> 7<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 8<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 9<script> 10$(function(){ 11 $('#box').css({"border-radius":0,"background-Color":"blue"}).on('click',function(){ 12 $(this).animate({ 13 "border-Top-Left-Radius":"50%", 14 "border-Top-Right-Radius":"50%", 15 "border-Bottom-Left-Radius":"50%", 16 "border-Bottom-Right-Radius":"50%", 17 "background-Color":"red"},1000); 18 }); 19}); 20</script> 21<div id="box"></div> 22

投稿2019/05/23 00:48

yambejp

総合スコア114572

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

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

0

きっとやりたいことは円の周囲を四角で囲って背景にしたいんですよね。そしたらその塗りつぶす四角い部分もdivで作ってあげなきゃだめです。
今書かれているcssは円に対して、skyblueとredの両方を当てているだけなので、結果的に優先順位の高いskyblueに染まったdivが出来上がっているだけです。

投稿2019/05/22 17:45

hentaiman

総合スコア6389

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問