問題

7
JavaScript

色を取得して赤なら青にしよう

JavaScriptの問題に挑戦しよう!

問題

色を取得して赤なら青にしよう

青色の中に1つだけ赤色のliタグがある
1つ1つクリックしていき、もし赤色だった場合
青色に変えよう。

あらかじめエディタに書くコード

                    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
¥HTML¥
                
                    ul{
    width: 1000px;
    margin: 0 auto 0 auto;
    display: flex;
    list-style: none;
}
li{
    height: 100px;
    width: 100px;
    background-color: #1d4177;
    margin-right: 10px;
}
li:nth-child(1){background-color: rgb(0, 0, 255);}
li:nth-child(2){background-color: rgb(0, 0, 255);}
li:nth-child(3){background-color: rgb(255, 0, 0);}
li:nth-child(4){background-color: rgb(0, 0, 255);}
li:nth-child(5){background-color: rgb(0, 0, 255);}
¥CSS¥
                

期待する画面

解答と解説(色を取得して赤なら青にしよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

色は「rgb」で取得ができる。
もしその事を知らなくても、アラートやlogに出してみて
まずは一体どうゆう形で取得ができるのかを調べてみる
「#000」の形なのか「red」の形なのか。
憶測を立てつつ検証してみよう

さらにスキルアップしたい方は公式LINEから「JavaScript」と送信すると動画が見れます。

LINE登録して動画を視聴する
最大300,000円OFF キャンペーン実施中!
2024 BLACK FRIDAY 学び応援セール実施中!