0028.小實戰：開關燈特效 · 原生js-2020

~~~ <style> html, body { height: 100%; overflow: hidden; } button { padding: 0 20px; line-height: 35px; } </style> ~~~ ~~~ <body style="background-color: white;"> <button id="lampBtn">關燈</button>  <script> /* * 要實現的思路和功能 * 1.默認頁面是白色的（開燈狀態），按鈕顯示的文字是關燈 * 2.點擊按鈕 * 1）獲取當前開關燈的狀態（看BODY的背景顏色） * 2）如果當前是開燈狀態（BODY的背景顏色是白色），我們讓BODY背景顏色變為黑色（關燈狀態），按鈕中顯示開燈 * 3）如果當前是關燈狀態（BODY的背景顏色是黑色），我們讓BODY背景顏色變為白色（開燈狀態），按鈕中顯示關燈 */ // 1.想要操作誰就先獲取誰 BODY和按鈕 let lampBtn = document.getElementById('lampBtn'); //=>獲取按鈕 let body = document.body; //=>獲取BODY // 2.事件綁定：點擊按鈕的時候做什么事情 lampBtn.onclick = function () { /* 元素.style.xxx=xxx：設置元素的行內樣式，元素.style.xxx 不賦值的情況下是獲取元素的行內樣式（記住是行內樣式：不管在哪設置的樣式，只要不是在行內上設置，都獲取不到） */ // 獲取BODY的背景顏色 let bg = body.style.backgroundColor; if (bg === 'white') { // 當前處于開燈狀態 body.style.backgroundColor = "black"; lampBtn.innerText = "開燈"; } else { // 當前處于關燈狀態 body.style.backgroundColor = "white"; lampBtn.innerText = "關燈"; } }; </script> </body> ~~~