如何在页面加载时自动调用sidebarColor()应用保存的侧边栏颜色配置？

方法1：利用DOM加载完成事件自动触发 #

页面DOM元素加载完成后，找到已处于选中状态的颜色选项按钮，直接调用sidebarColor()函数传入该元素即可：

document.addEventListener('DOMContentLoaded', function() {
  // 替换为你实际标记选中状态的选择器，比如带.active类的按钮
  const activeColorBtn = document.querySelector('.color-option.active');
  if (activeColorBtn) {
    sidebarColor(activeColorBtn);
  }
});

将这段代码放在页面的<script>标签中（推荐放在</body>闭合前，或在<head>内添加监听），页面加载完成后就会自动执行，侧边栏就能同步应用选中的颜色。

方法2：通过PHP直接传递默认索引调用函数 #

既然你已经通过AdminSettings类设置了默认颜色索引（比如索引4），可以直接用PHP输出JS代码，在页面加载时调用函数：

<?php
// 假设通过这个方法获取预设的默认颜色索引
$defaultColorIndex = AdminSettings::getDefaultColorIndex();
?>
<script>
window.addEventListener('load', function() {
  // 根据索引找到对应的颜色按钮
  const colorBtn = document.querySelectorAll('.color-option')[<?php echo $defaultColorIndex; ?>];
  if (colorBtn) {
    sidebarColor(colorBtn);
  }
});
</script>

这种方式不依赖按钮的选中状态，直接通过PHP传递的索引定位目标按钮，调用函数完成颜色应用。

补充注意事项 #

• 确保sidebarColor()函数的定义在上述调用代码之前，避免出现“函数未定义”的报错，建议把函数放在<head>标签内，或调用代码之前的位置。
• 如果颜色按钮带有data-index这类标识属性，也可以用document.querySelector('[data-index="<?php echo $defaultColorIndex; ?>"]')来更精准地定位目标元素。

内容的提问来源于stack exchange，提问作者Pablo Martínez López