將 CSS 樣式更改為 Div 的主體顏色

Question

我是 HTML 和 CSS（學生）的新手，我在這里遇到了一個問題。

單擊具有 CSS Animation 的元素時，我想更改正文背景顏色。這可能嗎？ 謝謝！

我試圖將火箭設置為按鈕，但它只改變了火箭的顏色。 我想讓它改變身體的背景顏色。

 body { background: radial-gradient(circle at bottom, navy 0, black 100%); height: 100vh; overflow: hidden; }.orbit { height: 450px; width: 650px; border-radius: 50%; position: absolute; margin: auto; left: 500px; bottom: 300px; animation: spin 5s infinite linear; } @keyframes spin { 100% { transform: rotate(360deg) } }.rocket { background-color: #fafcf7; height: 50px; width: 25px; border-radius: 50% 50% 0 0; position: relative; left: 11px; top: 115px; }.rocket:before { position: absolute; content: ""; background-color: #39beff; height: 20px; width: 55px; z-index: -1; border-radius: 50% 50% 0 0; right: -15px; bottom: 0; }.rocket:after { position: absolute; content: ""; background-color: #39beff; height: 4px; width: 15px; border-radius: 0 0 2px 2px; bottom: -4px; left: 4.3px; }.window { position: relative; height: 10px; width: 10px; background-color: #151845; border: 2px solid #b8d2ec; border-radius: 50%; top: 15px; left: 5px; }

 <div class="orbit"> <button class="rocket"></button> <div class="window"></div> </div>

Answer 1

為此，您需要了解 JavaScript。使用此示例代碼並嘗試自己做更多事情。

 const rocket = document.getElementById("rocket") rocket.addEventListener('click', (e) => { const randomColor = Math.floor(Math.random()*16777215).toString(16); document.body.style = `background: radial-gradient(circle at bottom, #${randomColor} 0, black 100%);` })

 body { background: radial-gradient(circle at bottom, navy 0, black 100%); height: 100vh; overflow: hidden; }.orbit { height: 450px; width: 650px; border-radius: 50%; position: absolute; margin: auto; left: 500px; bottom: 300px; animation: spin 10s infinite linear; } @keyframes spin { 100% { transform: rotate(360deg) } }.rocket { background-color: #fafcf7; height: 50px; width: 25px; border-radius: 50% 50% 0 0; position: relative; left: 11px; top: 115px; cursor: pointer; }.rocket:before { position: absolute; content: ""; background-color: #39beff; height: 20px; width: 55px; z-index: -1; border-radius: 50% 50% 0 0; right: -15px; bottom: 0; }.rocket:after { position: absolute; content: ""; background-color: #39beff; height: 4px; width: 15px; border-radius: 0 0 2px 2px; bottom: -4px; left: 4.3px; }.window { position: relative; height: 10px; width: 10px; background-color: #151845; border: 2px solid #b8d2ec; border-radius: 50%; top: 15px; left: 5px; }

 <div class="orbit"> <button id="rocket" class="rocket"></button> <div class="window"></div> </div>