为了让插件面板的复选框具有改变CSS的功能,可以在JavaScript中为其添加事件监听器。在事件发生时,根据复选框的状态,更新页面的CSS样式,并保存该状态。以下是一个示例代码:
HTML代码:
JavaScript代码:
const checkbox = document.getElementById('theme-switcher');
const body = document.querySelector('body');
const STORAGE_KEY = 'isDarkMode';
// 根据存储的状态初始化复选框和页面
if (localStorage.getItem(STORAGE_KEY) === 'true') {
body.classList.add('dark-mode');
checkbox.checked = true;
}
// 复选框改变时更新页面和存储的状态
checkbox.addEventListener('change', function() {
if (checkbox.checked) {
body.classList.add('dark-mode');
localStorage.setItem(STORAGE_KEY, 'true');
} else {
body.classList.remove('dark-mode');
localStorage.setItem(STORAGE_KEY, 'false');
}
});
CSS代码:
body {
/* 页面默认样式 */
}
body.dark-mode {
/* 暗黑模式下的样式 */
}