0

页面加载后，如果我们正在使用 JavaScript 或 jQuery 对页面的外观进行一些更改，例如样式，是否可以将其恢复为默认状态（即，恢复到页面加载时的状态）而不重新加载页？如果是这样，该怎么做？

4

4 回答 4

3

在元素上设置空白样式.css()将重置该样式。来自jQuery 文档.css()：

将样式属性的值设置为空字符串 — 例如 $('#mydiv').css('color', '') — 如果该属性已被直接应用，则从元素中删除该属性，无论是在 HTML 样式中属性，通过 jQuery 的 .css() 方法，或者通过 style 属性的直接 DOM 操作。

例如：

$('div#green').css('background', 'red').css('background', '');

假设它最初是这样做的，将再次重置div#green为具有绿色背景。

然而，有一个（尽管是明智的）警告需要考虑。该.css()文件指出：

但是，它不会删除在样式表或<style>元素中使用 CSS 规则应用的样式。

于 2013-05-07T18:17:04.657 回答
1

一个干净的方法是使用类。将您的类样式添加到页面，然后使用 addClass() 和 removeClass() 在自定义样式和默认样式之间切换。

于 2013-05-07T18:24:39.153 回答
1

要恢复整个页面，假设您没有使用默认样式（您不应该使用内联样式），您可以使用：

$('*[style]').removeAttr('style');

否则，你可以这样做：

$(function() {
      var original = $('body').clone();
});

function revert_to_original() {
    $('body').html(original);
}

但是有了这个，您可能必须重新绑定所有事件，并且您必须确保在对 DOM 进行任何更改之前获取原始事件。

否则，您可以删除要重置的特定样式

$('#element').css('whatever style', '');
于 2013-05-07T18:18:46.087 回答
1

您必须跟踪应用了哪些样式并撤消更改。最好的方法可能是创建一个setStyle函数，如下所示：

var stylesChanged = [];
function setStyle(element, style, value) {
    element.style[style] = value;

    stylesChanged.push({
        element: element,
        style: style,
        previousValue: element.style
    });

    return element;
}

然后你可以有一个resetStyles函数，像这样：

function resetStyles() {
    for(style in stylesChanged) {
        stylesChanged[style].element.style = stylesChanged[style].previousValue;
    }
}

因此，您无需手动更改元素的样式，而是使用 setStyle 函数设置样式，如下所示：

setStyle(document.getElementById("someElement"), "color", "white");

这需要更多的工作，但这种技术的好处是您不会丢失任何以前绑定的事件或任何东西。

于 2013-05-07T18:19:18.897 回答