Question

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

我找到了一个将CSS复制到另一个对象的函数，但是当我将样式从 p 元素复制到 textarea 时，我无法使用键盘移动克拉上/下/左/右＆amp;单击时，它不会注册/触发焦点事件。功能在这里：http://upshots.org/javascript/jquery-copy-style-copycss

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

有没有办法在JQuery＆amp;中迭代样式对象？将定义的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', '');

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

1 个答案: