迭代样式对象中的每个属性

Question

在JavaScript/JQuery中，我需要将一个元素CSS样式对象复制到另一个对象。

我发现一个函数，复制CSS到另一个对象，但是当我从p元素复制样式到textarea的使用键盘的上/下/左/右&它，我不能再移动克拉点击时不注册/触发焦点事件。功能位置：http://upshots.org/javascript/jquery-copy-style-copycss

的功能似乎不是仅复制设置/中定义的，即每一个可能的CSS属性，如果-moz-变换从未定义/为p元素设置，它仍然会将该属性复制过来，但将其设置为自动（-moz-transform：auto）。所以我认为这就是为什么当我复制CSS时，textarea不会对焦点事件&键盘事件做出反应。

有没有办法迭代JQuery中的样式对象&将定义的CSS属性复制到新的对象样式对象？

var styleToCpy = $(oldEle.style); 
// maybe I need to do this instead: var styleToCpy = $(oldEle.css()); 

styleToCpy.each(function(attribName, value) 
{ 
    newEle.css(attribName, value); 
}); 

这是在这里使用功能出现问题：http://upshots.org/javascript/jquery-copy-style-copycss

var newEle = document.createElement("textarea"); 
newEle.copyCSS(oldPElement); 

// Now textarea has all these unnecessary CSS 
// attribs AND they make the textarea NOT react 
// to keydown & focus events! 
element.style { 
-moz-animation: 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s normal none 1 none; 
-moz-animation-play-state: running; 
-moz-appearance: none; 
-moz-background-inline-policy: continuous; 
-moz-binding: none; 
-moz-box-align: stretch; 
-moz-box-direction: normal; 
-moz-box-flex: 0; 
-moz-box-ordinal-group: 1; 
-moz-box-orient: horizontal; 
-moz-box-pack: start; 
-moz-box-sizing: content-box; 
-moz-column-gap: 12.8px; 
-moz-column-rule: 0 none #666666; 
-moz-columns: auto auto; 
-moz-float-edge: content-box; 
-moz-force-broken-image-icon: 0; 
-moz-hyphens: manual; 
-moz-image-region: auto; 
-moz-orient: horizontal; 
-moz-outline-radius: 0 0 0 0; 
-moz-stack-sizing: stretch-to-fit; 
-moz-tab-size: 8; 
-moz-text-blink: none; 
-moz-text-decoration-color: #666666; 
-moz-text-decoration-line: none; 
-moz-text-decoration-style: solid; 
-moz-transform: none; 
-moz-transform-origin: 50% 50%; 
-moz-transition: all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; 
-moz-user-focus: none; 
-moz-user-input: auto; 
-moz-user-modify: read-only; 
-moz-user-select: auto; 
-moz-window-shadow: default; 
background: none repeat scroll 0 0 #FFFFFF; 
border: 2px solid #7DFF00; 
border-collapse: separate; 
border-radius: 0 0 0 0; 
border-spacing: 0; 
bottom: auto; 
box-shadow: none; 
caption-side: top; 
clear: none; 
clip: auto; 
clip-path: none; 
clip-rule: nonzero; 
color: #666666; 
color-interpolation: srgb; 
color-interpolation-filters: linearrgb; 
content: none; 
counter-increment: none; 
counter-reset: none; 
cursor: auto; 
direction: ltr; 
display: block; 
dominant-baseline: auto; 
empty-cells: show; 
fill: #000000; 
fill-opacity: 1; 
fill-rule: nonzero; 
filter: none; 
float: none; 
flood-color: #000000; 
flood-opacity: 1; 
font: 400 12.8px/16px "Arial","Helvetica",serif; 
height: 192px; 
image-rendering: auto; 
ime-mode: auto; 
left: 301.5px; 
letter-spacing: normal; 
lighting-color: #FFFFFF; 
list-style: disc outside none; 
margin: 0; 
marker: none; 
marker-offset: auto; 
mask: none; 
max-height: none; 
max-width: none; 
min-height: 0; 
min-width: 0; 
opacity: 1; 
outline: 0 none #000000; 
outline-offset: 0; 
overflow: visible; 
padding: 0; 
page-break-after: auto; 
page-break-before: auto; 
pointer-events: auto; 
position: absolute; 
quotes: "“" "”" "‘" "’"; 
resize: none; 
right: auto; 
shape-rendering: auto; 
stop-color: #000000; 
stop-opacity: 1; 
stroke: none; 
stroke-dasharray: none; 
stroke-dashoffset: 0; 
stroke-linecap: butt; 
stroke-linejoin: miter; 
stroke-miterlimit: 4; 
stroke-opacity: 1; 
stroke-width: 1px; 
table-layout: auto; 
text-align: left; 
text-anchor: start; 
text-indent: 0; 
text-overflow: clip; 
text-rendering: auto; 
text-shadow: none; 
text-transform: none; 
top: 645px; 
unicode-bidi: embed; 
vertical-align: baseline; 
visibility: visible; 
white-space: normal; 
width: 230px; 
word-spacing: 0; 
word-wrap: normal; 
z-index: 10000; 

Answer 1

只要使用HTML5的contenteditable如果旧浏览器的支持是没有必要的。

http://jsfiddle.net/rDJMv/1

<div contenteditable>hello world</div> 

或者用jQuery

$('.updatable').attr('contenteditable', '');