Question

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

Answer 1

使用.css()在元素上设置空白样式将重置该样式。来自jQuery documentation for .css()：

将样式属性的值设置为空字符串 - 例如 $（'＃mydiv'）。css（'color'，''） - 从元素中删除该属性如果已经直接应用，则是否为HTML样式属性，通过jQuery的.css（）方法，或通过直接DOM 操纵风格属性。

例如：

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

将div#green重新设置为绿色背景假设它在第一时间。

然而，有一个（虽然明智的）需要注意。 .css()文档指出：

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

Answer 2

要还原整个页面，假设您没有使用内联样式作为默认值（您不应该使用），您可以使用：

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

否则，您可以这样做：

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

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

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

否则，您可以使用

删除要重置的特定样式

$('#element').css('whatever style', '');

Answer 3

您必须跟踪应用的样式并撤消更改。最好的方法可能是创建一个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");

这是一项更多的工作，但这项技术的优点是你不会丢失任何先前受约束的事件或任何事情。

Answer 4

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

通过Javascript应用默认样式

4 个答案: