Question

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

我试过了：

var currentCSS = $(this).css;

输出类似于：

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

所以这似乎需要jQuery中的函数，这不是我想要的......

我可以遍历想要的个人参数，但应该有更好的方法......

然后在外面我会尝试类似的事情：

$(this).css(currentCSS);

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

Answer 1

如果你所有人都是内联样式而不是所有样式属性：

var $el=$(elem)
var style=$el.attr('style');
$el.removeAttr('style');


/* put style back*/

$el.attr('style',style);

类似地，在您操作它之后，删除代码所做的任何内联调整...删除style属性应该将其恢复为应用的原始css

Answer 2

这是一种方式，但善良是丑陋的。我认为我不需要将其转化为插件所需的理智（但如果其他人能够做到这一点真棒！请发布一个链接！）：

var elem = document.getElementById('a');
var originalCSSProperties = window.getComputedStyle(elem,null);
var originalCSSValues = [];
for (var i=0,len=originalCSSProperties.length; i<len; i++){
    originalCSSValues.push(
        window
        .getComputedStyle(elem,null)
        .getPropertyValue(originalCSSProperties[i]));
}

$('#a').css({'background-color':'red','color':'black'});

$('#reset').click(
    function(){
        for (var c=0,leng=originalCSSProperties.length;c<leng;c++){
            $('#a').css(originalCSSProperties[c],originalCSSValues[c]);
        }
    });

JS Fiddle demo

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

Answer 3

首先：

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

如果您想要改回原来的风格

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

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

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

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

3 个答案: