Q&A
javascript初心者で、javascriptのDOM操作に関する課題を行っています。
【課題内容】
「背景黒」ボタンを押すと、ページ全体の背景色が黒で文字色が白、「背景白」ボタンを押すと、ページ全体の背景色が白で文字色が黒となるようプログラムを追記してください。
【問題点】
以下のようにコードを記入し、【記述内容】の通り入力し、課題は解けたのですが、
document.body.style.color = "white";の代わりに下記【なんで以下にすると効かなくなるか】を
記述すると反応しません。
pタグを取得して、pタグの中身に対し、色の変更を行おうとしたのですが…
なぜ、以下のように指定すると反応がなくなるかを教えて頂けないでしょうか。
宜しくお願いいたします。
【なんで以下にすると効かなくなるか】
var p = document.getElementsByTagName("p");
p.style.color = "white";
【記述内容】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>実行タイミング</title> <script> /* 課題処理を追加 */ //背景を黒、文字色白のイベント function background_black(){ document.body.style.color = "white"; /* なんで以下にすると効かなくなるか var p = document.getElementsByTagName("p"); p.style.color = "white"; */ document.body.style.backgroundColor = "black"; } //背景を白、文字色黒のイベント function background_white(){ document.body.style.color = "black"; document.body.style.backgroundColor = "white"; }</head> <body> <p>ボタンクリックにより背景色と文字色を変化</p> <button id="black">背景黒</button> <button id="white">背景白</button> </body> </html>window.onload = function(){ var black = document.getElementById("black"); var white = document.getElementById("white"); black.addEventListener("click",background_black,false); white.addEventListener("click",background_white,false); } </script>
回答1件
0
ベストアンサー
getElementsByTagName はその名の通り、複数の要素、つまり要素の配列を返します。
JavaSCript
1var p = document.getElementsByTagName("p"); 2p[0].style.color = "white";
とすると、最初の<p>要素が白色になります。
投稿2020/01/19 08:43
総合スコア1105
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/19 08:46