Q&A
無事に解決しました。
分かりやすく説明していただきまして感謝いたします。
JavscriptのclassListのコードを作成しています。
赤く表示したところを押すと、緑色の文字が青く変わるようにしたいのですが、上手くできません。
ご教示いただきたく存じます。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <link rel="stylesheet" href="style.css"> 8 9 <script src="main.js"></script> 10 <title>classList</title> 11</head> 12<body> 13 14 <button id="push">ここを押す</button> 15 16 <div id="text" > 17 <h2>ボタンを押すと<br> 18 色が変わります</h2> 19 20 21 22 23</body> 24</html>
CSS
1body { 2 margin:0; 3 } 4 5 #push { 6 margin-top:10px; 7 margin-left:200px; 8 display:inline-block; 9 width:100px; 10 line-height:30px; 11 height:30px; 12 border:2px solid black; 13 background-color:red; 14 } 15 16 #text{ 17 18 margin-top:25px; 19 margin-left:170px; 20 color:green; 21 22 } 23 24 25 26 h2 #text_color_change { 27 28 color:blue; 29 }
Javascript
1'strict' 2 3 const push_button = document.getElementById('push'); 4 const text = document.getElementById('text'); 5 push_button.addEventListener('click', () => { 6 text.classList.toggle('text') 7 }); 8 9 10 11
回答2件
0
CSS
1.text h2 { 2 color:blue; 3}
投稿2021/10/27 04:25
総合スコア116724
0
ベストアンサー
text.classList.toggle('text')
これは、「<div id="text" > に class="text" を付け外しする」という意味です。ところが、スタイルシートには .text というセレクタがいっさいありませんから、何も変化がありません。
- この行を
text.classList.toggle('text_color_change')にする - スタイルシートの
h2 #text_color_change {を.text_color_change h2 {にする
がやりたかったことなのでしょうか。
投稿2021/10/27 04:23
総合スコア21695
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/27 20:57