从element获取CSS,放入JSON-Array,更改元素,使用存储的CSS数组恢复元素

所以我想从一个特定的Element获取css,将它放在JSON数组中,更改元素,稍后从存储的Array中恢复元素的css。

我试过了:

var currentCSS = $(this).css; 

输出类似于:

 function (a,c) if(arguments.length.... 

所以这似乎需要jQuery的function,这不是我想要的……

我可以遍历想要的个人论点,但应该有更好的方法……

然后在以后的场景我会尝试类似的东西:

 $(this).css(currentCSS); 

但这样做可能没有优雅的解决方案……

如果您所有人都是内联样式而不是所有样式属性:

 var $el=$(elem) var style=$el.attr('style'); $el.removeAttr('style'); /* put style back*/ $el.attr('style',style); 

类似地,在您操作它之后,删除代码所做的任何内联调整…删除style属性应该将其放回到应用的任何原始css

这是一种方式,但善良是丑陋的。 我认为我不需要把它变成一个插件所需要的理智(但是如果其他人能够做到这一点真棒!请发布一个链接!):

 var elem = document.getElementById('a'); var originalCSSProperties = window.getComputedStyle(​elem,null); var originalCSSValues = []; for (var i=0,len=originalCSSProperties.length; i 

JS小提琴演示 。

因为这依赖于window.getComputedStyle()它绝对不是 IE友好的,虽然我还没有研究兼容性,但我怀疑它可能需要非常现代的浏览器。 但是,那说,我希望它有一些用处。

首先:

  • 使用jQuery.clone创建元素的克隆并将其存储在变量中
  • 从克隆中删除所有子元素
  • 根据您的元素或内容进行所需的任何更改

当您想要更改回原始样式时

  • 在DOM中元素之前/之后插入克隆
  • 从元素中删除内容并将其附加到克隆
  • 删除元素,只留下包含元素内容的克隆

当然,这里没有存储样式的JSON数组。 相反,您的原始样式将保留在元素的克隆中。 我认为这无论如何都能实现你想要的结果。

这是一个JSFiddle,我在行动中展示了这一点。