单击按钮后如何将页面恢复为原始页面？

Question

我有这个阿拉伯语到英语的按钮，它使用一个针对每个元素的函数将整个页面更改为阿拉伯语格式，反之亦然。

页面以阿拉伯语格式开始，当按下英语 btn 时，将执行此功能：

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"
}

但我想当我按下阿拉伯语按钮时，页面恢复到原来的形式。

我已尝试将所有内容还原为英文格式。 但这需要太多时间。

有没有更简单的方法？

Answer 1

为了简化阿拉伯语和英语格式之间的切换：

• 在对象中存储原始样式和属性。
• 创建函数以应用英文样式和属性，并还原为原始样式和属性。
• 添加事件侦听器以在单击相应按钮时在这些功能之间切换。

下面是 JS 中的示例代码：

// Store the original styles and attributes
const originalStyles = {
    taskFormGap: document.getElementById('taskForm').style.gap,
    titlePadding: document.querySelector('.title').style.padding,
    taskInputPlaceholder: document.getElementById('taskinput').getAttribute('placeholder'),
    taskInputFontFamily: document.getElementById('taskinput').style.fontFamily,
    // ... add other original styles and attributes here
};

// Apply the English styles and attributes
function englishPage() {
    // ... your existing englishPage() function code
}

// Revert to the original styles and attributes
function arabicPage() {
    document.getElementById('taskForm').style.gap = originalStyles.taskFormGap;
    document.querySelector('.title').style.padding = originalStyles.titlePadding;
    document.getElementById('taskinput').setAttribute('placeholder', originalStyles.taskInputPlaceholder);
    document.getElementById('taskinput').style.fontFamily = originalStyles.taskInputFontFamily;
    // ... revert other styles and attributes here
}

// Event listener for the buttons
document.getElementById('englishBtn').addEventListener('click', englishPage);
document.getElementById('arabicBtn').addEventListener('click', arabicPage);