获取/迭代不在对象中的属性

根据这个问题 ，我需要知道一个属性不在一个对象中：

所以，我们有一些造型：

.foo { top: 13px; width: 37px; } 

……和这样一个对象：

 var keyframe = { 0: { top: 0 }, 1000: { top: 100 }, 2000: { width: 100 } }; 

现在我需要迭代不在下一个/上一个框架中的所有属性-item，用jQuery-object中的css-values填充缺少的属性。

这样最终的对象看起来像这样：

 var keyframe = { 0: { top: 0, width: '37px' }, 1000: { top: 100, width: '37px' }, 2000: { top: 100, width: 100 } }; 

我尝试过这样的事情：

http://fiddle.jshell.net/WdNge/

 var $foo = $('.foo'); for (var key in keyframe) { var obj = keyframe[key]; for(var ok in obj) { if (!(ok in obj)) obj[ok] = $foo.css(ok); } } 

但似乎是这样

 if (!(ok in obj)) // is always `truthy` 

但是如果我直接申报的话

 if (!('top' in obj)) // it works... 

有任何想法吗？

更新

我甚至试过这样的事，但没有成功：

http://fiddle.jshell.net/WdNge/1/

 var $foo = $('.foo'); var keys = []; for (var key in keyframe) { var obj = keyframe[key]; var k = Object.keys(obj); keys.push(k[0]); for(var i = 0; i < keys.length; i++) { var ok = keys[i]; if (!(ok in obj)) obj[ok] = $foo.css(ok); } } 

Answer 1

AFAIK您无法使用jQuery / Javascript从类中提取指定的CSS属性。

这意味着你必须a）在你的Javascript中将.foo类规范分别存储为JSON或b）迭代jQuery知道的所有CSS属性。

CSS

 .foo { top: 0; width: 100px; } 

使用Javascript

 var foo_styles = { top: 0, width: "100px" }, keyframe = { 0: { top: 0 }, 1000: { top: 100 }, 2000: { width: 100 } }; for (var key in keyframe) { var frame = keyframe[key]; for(var frameProperty in foo_styles) { if (!(frameProperty in frame)) { frame[frameProperty] = foo_styles[frameProperty]; } else { // Update with last value from keyframe foo_styles[frameProperty] = frame[frameProperty]; } } }