从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,我在行动中展示了这一点。