点击按钮后如何快速恢复页面至初始阿拉伯语格式？

我有阿拉伯语与英语切换按钮，页面初始为阿拉伯语格式。点击英语按钮时会执行以下englishPage函数修改元素样式与内容：

function englishPage()
{
    document.getElementById('taskForm').style.gap = '6px'
    document.querySelector('.title').style.padding = '0 6px'
    document.getElementById('taskinput').setAttribute('placeholder','Have Any New Tasks ?')
    document.getElementById('taskinput').style.fontFamily = "Shantell Sans"
    document.getElementById('tsk-sub-btn').setAttribute('value','Add')
    document.getElementById('tsk-sub-btn').style.fontFamily = "Shantell Sans"
    document.getElementById('tsk-arc-btn').setAttribute('value','Archive')
    document.getElementById('tsk-arc-btn').style.fontFamily = "Shantell Sans"
    document.getElementById('navele1').innerHTML = "Tasks"
    document.getElementById('navele1').style.fontFamily = "Shantell Sans"
    document.getElementById('navele2').innerHTML = "Archived Tasks"
    document.getElementById('navele2').style.fontFamily = "Shantell Sans"
}

现在希望点击阿拉伯语按钮时将页面恢复至初始状态，尝试过逐个还原但耗时，请问是否有更简便的实现方法？

方法1：CSS类切换（最推荐，可维护性最高） #

把英语模式的所有样式封装到一个CSS类中，切换语言时只需给根元素（如body）添加/移除这个类；文本内容则用语言包统一管理，避免零散修改。

步骤1：编写CSS类

/* 英语模式专属样式 */
.english-mode #taskForm {
  gap: 6px;
}
.english-mode .title {
  padding: 0 6px;
}
.english-mode #taskinput,
.english-mode #tsk-sub-btn,
.english-mode #tsk-arc-btn,
.english-mode #navele1,
.english-mode #navele2 {
  font-family: "Shantell Sans";
}

步骤2：用语言包管理文本

// 存储多语言文本的对象
const langTexts = {
  en: {
    taskinputPlaceholder: 'Have Any New Tasks ?',
    tskSubBtn: 'Add',
    tskArcBtn: 'Archive',
    navele1: 'Tasks',
    navele2: 'Archived Tasks'
  },
  ar: {
    taskinputPlaceholder: 'هل لديك مهام جديدة؟',
    tskSubBtn: 'إضافة',
    tskArcBtn: 'أرشيف',
    navele1: 'المهام',
    navele2: 'المهام المؤرشفة'
  }
};

// 统一设置文本的工具函数
function setLangTexts(lang) {
  const texts = langTexts[lang];
  document.getElementById('taskinput').setAttribute('placeholder', texts.taskinputPlaceholder);
  document.getElementById('tsk-sub-btn').setAttribute('value', texts.tskSubBtn);
  document.getElementById('tsk-arc-btn').setAttribute('value', texts.tskArcBtn);
  document.getElementById('navele1').textContent = texts.navele1;
  document.getElementById('navele2').textContent = texts.navele2;
}

// 切换到英语
function englishPage() {
  document.body.classList.add('english-mode');
  setLangTexts('en');
}

// 切换到阿拉伯语
function arabicPage() {
  document.body.classList.remove('english-mode');
  setLangTexts('ar');
}

这样切换阿拉伯语时，只需移除english-mode类，页面就会自动回到初始的CSS样式，再调用setLangTexts('ar')恢复文本即可，完全不用逐个还原样式。

方法2：预存初始状态快照 #

页面加载时，一次性保存所有需要修改元素的初始样式和文本，切换阿拉伯语时直接批量恢复。

// 页面加载完成后，保存初始状态
let initialState;
window.addEventListener('load', () => {
  initialState = {
    taskFormGap: document.getElementById('taskForm').style.gap,
    titlePadding: document.querySelector('.title').style.padding,
    taskinputPlaceholder: document.getElementById('taskinput').getAttribute('placeholder'),
    taskinputFontFamily: document.getElementById('taskinput').style.fontFamily,
    tskSubBtnValue: document.getElementById('tsk-sub-btn').getAttribute('value'),
    tskSubBtnFontFamily: document.getElementById('tsk-sub-btn').style.fontFamily,
    tskArcBtnValue: document.getElementById('tsk-arc-btn').getAttribute('value'),
    tskArcBtnFontFamily: document.getElementById('tsk-arc-btn').style.fontFamily,
    navele1HTML: document.getElementById('navele1').innerHTML,
    navele1FontFamily: document.getElementById('navele1').style.fontFamily,
    navele2HTML: document.getElementById('navele2').innerHTML,
    navele2FontFamily: document.getElementById('navele2').style.fontFamily
  };
});

// 切换到阿拉伯语的函数
function arabicPage() {
  if (!initialState) return;
  // 批量恢复样式
  document.getElementById('taskForm').style.gap = initialState.taskFormGap;
  document.querySelector('.title').style.padding = initialState.titlePadding;
  document.getElementById('taskinput').style.fontFamily = initialState.taskinputFontFamily;
  document.getElementById('tsk-sub-btn').style.fontFamily = initialState.tskSubBtnFontFamily;
  document.getElementById('tsk-arc-btn').style.fontFamily = initialState.tskArcBtnFontFamily;
  document.getElementById('navele1').style.fontFamily = initialState.navele1FontFamily;
  document.getElementById('navele2').style.fontFamily = initialState.navele2FontFamily;

  // 批量恢复文本
  document.getElementById('taskinput').setAttribute('placeholder', initialState.taskinputPlaceholder);
  document.getElementById('tsk-sub-btn').setAttribute('value', initialState.tskSubBtnValue);
  document.getElementById('tsk-arc-btn').setAttribute('value', initialState.tskArcBtnValue);
  document.getElementById('navele1').innerHTML = initialState.navele1HTML;
  document.getElementById('navele2').innerHTML = initialState.navele2HTML;
}

这个方法不需要修改CSS，适合快速改造现有代码，缺点是如果后续新增需要切换的元素，要同步更新初始状态的保存逻辑。

方法3：清空内联样式+恢复文本 #

如果初始样式都写在CSS文件中（没有内联样式），可以直接清空英语模式添加的内联样式，再恢复阿拉伯语文本。

function arabicPage() {
  // 清空所有修改过的内联样式
  document.getElementById('taskForm').style = '';
  document.querySelector('.title').style = '';
  document.getElementById('taskinput').style = '';
  document.getElementById('tsk-sub-btn').style = '';
  document.getElementById('tsk-arc-btn').style = '';
  document.getElementById('navele1').style = '';
  document.getElementById('navele2').style = '';

  // 恢复阿拉伯语文本
  document.getElementById('taskinput').setAttribute('placeholder', 'هل لديك مهام جديدة؟');
  document.getElementById('tsk-sub-btn').setAttribute('value', 'إضافة');
  document.getElementById('tsk-arc-btn').setAttribute('value', 'أرشيف');
  document.getElementById('navele1').innerHTML = 'المهام';
  document.getElementById('navele2').innerHTML = 'المهام المؤرشفة';
}

注意：如果元素初始带有内联样式，这个方法会一并清空，因此只适合初始样式完全由CSS类控制的场景。

内容的提问来源于stack exchange，提问作者barhoom