Javascript：保存和还原样式状态在IE中不起作用？

Question

Suppose we store a style as follows:

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

...then we perform a number of operations that manipulate and change the style of the object. After we are done with the changes we finally do something like this to restore the state of the style before the changes:

CSSobject.style = origStyle;

The above technique works for Chrome and Firefox, but I notice it does not function in Edge 25.10 or Explorer. (Note: the objective was to restore an arbitrary state back to itself, and not to get back to defaults)

Is this a simple fix ? or is it a can of worms ?

PS. I am not into Jquery (not using it). Pure Javascript solutions are preferable at the moment. Thanks !

Answer 1

If you are making all changes inline, I would suggest store the style attribute instead of the entire computed style. This way it would be more efficient.

EDIT

http://codepen.io/jammer99/pen/JXpdMB This works for me in IE and 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])

Answer 2

I am not sure but you could snapshot current style on an object somethig like below code does. It's just and idea. (ref 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();

Answer 3

It would be interesting to see a working page and exactly the problem you are facing. Since getComputedStyle() works in all browsers, I can only assume that your problems stem from the assignment of the computed value to the element's style.

I have to say that just assigning the style to an object does not restore the state of the object as it was, it only tries to force it. For example a CSS rule with !important can override even an inline style rule. Values in the computed style are computed from CSS and the state of the window, like width, for example. You set that in the style and your element is now frozen, unresponsive to changes in the size of the window, for example.

My suggestion is to find a harder to implement but better working solution for your real issue instead of using getComputedStyle. Using the style value would make more sense, for example.

Answer 4

What can I say, it is possible, but u can do it in a different way.

U can't store and restore styles directly by the way u are trying.

What u can do is store all the styles in the page (default styles) in a JS object one by one like this way with a little help from jQUery -

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

This example is given for only one element, you should do it for each and every style which will be changed in run-time .

Then you should create a function for restoring the styles from stored values in JS file like this way-

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

This should be done every element u have changed style in run-time.

More can be found here and here .

---

Update-

U can also store your design in Local Storage from where u will restore designs.

More can be found here .

---

Think u have your answer :).

Answer 5

Alright, this was much easier than I thought (especially in my case where I use no inline styles at all; it is all external CSS).

Anytime Javascript assigns a value via the .style selector it is essentially creating an internal style and assigns to it.

All I had to do is set the style to null and it is all back to reading the external CSS as if nothing happened el.style = null ... to make it a little more robust (in the off change that there is some minor internal style setting) I could save it as var origInlineStyle = el.style.cssText beforehand and then do el.style.cssText = origInlineStyle