Javascript:保存和恢复样式状态在IE中不起作用

Javascript: saving and restoring style state not working in IE?

本文关键字：IE 不起作用 状态 样式 保存 恢复 Javascript      更新时间：2024-04-26

假设我们存储如下样式：

var  CSSobject = obj;
var  origStyle = getComputedStyle(obj);

然后我们执行一些操作来操作和更改对象的样式。在我们完成更改后，我们最终会这样做，以恢复更改前的样式状态：

CSSobject.style = origStyle;

以上技术适用于Chrome和Firefox，但我注意到它在Edge 25.10或Explorer中不起作用。（注意：目标是将任意状态恢复到其自身，而不是恢复到默认状态）

这是一个简单的解决方案吗？还是一罐蠕虫？

PS。我不喜欢Jquery（不使用它）。目前，纯Javascript解决方案更可取。谢谢

好吧，这比我想象的要容易得多（尤其是在我根本不使用内联样式的情况下；它都是外部CSS）。

任何时候Javascript通过.style选择器分配一个值，它本质上是在创建一个内部样式并分配给它

我所要做的就是将样式设置为null，然后就可以像什么都没发生一样读取外部CSS el.style = null。。。为了使它更健壮一点（在关闭更改中，有一些小的内部样式设置），我可以预先将其保存为var origInlineStyle = el.style.cssText，然后执行el.style.cssText = origInlineStyle

我不确定，但您可以像下面的代码一样在对象上快照当前样式。这只是一个想法。（参考http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/)

    /*Snapshotting utils*/
    (function () {
        var stylesToSnapshot = ["transform", "-webkit-transform"];
        $.fn.snapshotStyles = function () {
            if (window.getComputedStyle) {
                $(this).each(function () {
                    for (var i = 0; i < stylesToSnapshot.length; i++)
                        this.style[stylesToSnapshot[i]] = getComputedStyle(this)[stylesToSnapshot[i]];
                });
            }
            return this;
        };
        $.fn.releaseSnapshot = function () {
            $(this).each(function () {
                this.offsetHeight; // Force position to be recomputed before transition starts
                for (var i = 0; i < stylesToSnapshot.length; i++)
                    this.style[stylesToSnapshot[i]] = "";
            });
        };
    })();
    /*example usage*/
    $(ui.item).snapshotStyles().removeClass("dragging").releaseSnapshot();

如果您以内联方式进行所有更改，我建议存储style属性，而不是整个计算样式。这样会更有效率。

编辑

http://codepen.io/jammer99/pen/JXpdMB这适用于IE和EDGE

var CSSobject = $("h1")[0];
var origStyle = window.getComputedStyle(CSSobject); //,null); passing null is optional or you can pass the pseudo element of which you want the properties of 
var switchStyle = function(to) {
  for (p in origStyle) {
    to.style[p] = origStyle[p];
  }
};
switchStyle($("span")[0])

如果能看到一个工作页面以及您所面临的问题，那将是一件很有趣的事情。由于getComputedStyle（）适用于所有浏览器，我只能假设您的问题源于将计算值分配给元素的样式。

我不得不说，仅仅将样式分配给一个对象并不能恢复对象的状态，它只是试图强制它！important甚至可以覆盖内联样式规则。计算样式中的值是根据CSS和窗口状态（例如宽度）计算的。你在样式中设置了它，你的元素现在被冻结了，对窗口大小的变化没有反应。

我的建议是为您的实际问题找到一个更难实现但更有效的解决方案，而不是使用getComputedStyle。例如，使用样式值会更有意义。

我能说什么呢，这是可能的，但你可以用不同的方式来做。

你无法通过尝试的方式直接存储和恢复样式。

你可以做的是将页面中的所有样式（默认样式）一个接一个地存储在JS对象中，就像这样，只需要jQUery-的一点帮助

var defaultStyle;
defaultStyle.background_color = [];
defaultStyle.background_color.p_classSelected = $("p.class_selected").css("background-color");

这个例子只针对一个元素，您应该针对每个将在运行时更改的样式执行此操作。

然后，您应该创建一个函数来恢复JS文件中存储值的样式，如下所示-

$("p.class_selected").css("propertyname",defaultStyle.background_color.p_classSelected);

每个元素u在运行时都应该改变样式。

更多信息可以在此处和这里找到。

更新-

U还可以将您的设计存储在本地存储中，从中恢复设计。

更多信息可在此处找到。

我想你已经有了答案：）。

相关文章：