使用 JavaScript 的本地存储功能(localStorage)在页面加载时保存按钮状态,当页面重新加载后再从本地存储中获取按钮状态来设置按钮样式。
示例代码如下:
HTML:
JavaScript:
// 获取按钮元素 const btn = document.getElementById('btn');
// 页面加载时,从本地存储中获取按钮状态并设置按钮样式 if (localStorage.getItem('btnClicked') === 'true') { btn.classList.add('clicked'); }
// 按钮点击事件监听 btn.addEventListener('click', () => { // 切换按钮样式 btn.classList.toggle('clicked'); // 将按钮状态保存到本地存储中 localStorage.setItem('btnClicked', btn.classList.contains('clicked')); });
CSS:
/* 点击状态下的按钮样式 */ .clicked { background-color: blue; color: white; }
下一篇:按钮在移动设备上无法调整大小