CSS編程中有一個很常見的需求,那就是當頁面剛進入的時候,對按鈕進行高亮顯示。這個效果非常簡單,只需要用CSS定義一個類名,然后在頁面加載完成后,通過JavaScript給按鈕添加這個類名即可。
下面是一個簡單的CSS樣式定義:
.highlight { background-color: #fff; border: 2px solid #f5a623; color: #f5a623; }
這個樣式定義就是將按鈕的背景色設置為白色,邊框設置為橙黃色,文本顏色也設置為橙黃色。
在頁面加載完成后,通過JavaScript獲取需要高亮的按鈕,然后添加highlight這個類名即可:
window.onload = function() { var btn = document.getElementById('btn'); btn.classList.add('highlight'); };
這里需要注意的是,classList.add()是ES6語法,在低版本瀏覽器中可能不被支持。如果要兼容舊版瀏覽器,可以使用jQuery等庫來操作DOM元素。
這樣一來,當用戶打開頁面后,按鈕就會亮起來,給用戶一個更醒目的提示,提高用戶體驗。
下一篇css列表順序加載