JS根據條件改變CSS是開發中常用的技巧之一,它能夠讓我們根據不同情況動態修改頁面的樣式。下面我們通過一個實例來演示如何實現。
const button = document.getElementById('button'); const body = document.getElementsByTagName('body')[0]; button.addEventListener('click', function() { if (body.style.backgroundColor === 'white') { body.style.backgroundColor = 'blue'; button.style.color = 'white'; } else { body.style.backgroundColor = 'white'; button.style.color = 'black'; } });
在這個例子中,我們通過獲取DOM元素和添加事件監聽函數實現了根據點擊按鈕來改變背景色和文字顏色的效果。具體地,當背景色為白色時,按鈕文字變成白色,背景色變成藍色;當背景色為藍色時,則相反。
為了使代碼更加清晰易懂,我們使用了if語句來判斷當前的背景色,從而實現不同情況下有不同的操作。同時,我們使用了style屬性來改變元素的樣式。
總之,JS根據條件改變CSS是一種非常實用的技巧,可以幫助我們優化頁面效果,提升用戶體驗。