如何使用jquery获取元素的css属性列表

Question

我想弄清楚是否有更简单的方法来保存CSS属性列表我将更改，然后恢复使用JSON对象中的任何元素jquery无需编写如下getAttributes函数。

可以说我有3个属性的阵列，我想保留的元素：

我可以这样写一个函数就应该是这样的：

function getAttributes(elem, attrs){ 
    var obj={}; 
    $.each(attrs,function(i,attr){ 
     obj[attr]=$(elem).css(attr); 
    }); 
    return obj; 
    } 

    oldAttrs=getAttributes('input',['color','background-color','font-size']); 

    $('input').css({color:'green', 'background-color':'blue', fonts-size:'10px'}); 
    ......  

后来，我就可以只做这个优雅的方法来恢复：

$('input').css(oldAttrs); 

任何想法？

Answer 1

这里没有jQuery函数，但静态方法window.getComputedStyle适用于所有现代浏览器和IE9。

var cachedStyle = window.getComputedStyle(domElement); 

// later 
$(domElement).css(cachedStyle); 

更新：如果你只希望保留一些样式属性

你不能选择你开始使用getComputedStyle哪些属性，但您可以选择您在使用哪些$的.css。假设您只想保留背景颜色，宽度和左边距（出于某种原因）：

var cachedStyle = window.getComputedStyle(domElement); 
var propNamesToPreserve = ['backgroundColor','width','marginLeft']; // use the JS-style camelcased attributes, not hyphen-separated CSS properties 

var preservedProps = {}; 
$.each(propNamesToPreserve, function(ix, name) { 
    preservedProps[name] = cachedStyle[name]; 
}); 

//later 
$(domElement).css(preservedProps);