Itera sobre cada atributo en el objeto de estilo

En Javascript / JQuery tengo la necesidad de copiar un objeto de estilo CSS de elementos a otro objeto.

Encontré una función que copia el CSS a otro objeto, pero cuando copio el estilo de un p elemento a un área de texto Entonces no puedo mover el quilate usando el teclado hacia arriba / abajo / izquierda / derecha y no registra / activa el evento de enfoque cuando se hace clic. Función aquí: http://upshots.org/javascript/jquery-copy-style-copycss

La función parece copiar TODOS los atributos css posibles en lugar de solo los que están establecidos / definidos, es decir, si -moz-transform nunca se definió / estableció para el p elemento, todavía copiará ese atributo pero lo tendrá en auto (-moz-transform: auto). Entonces creo que esta es la razón por la que cuando copio el CSS, el área de texto no reacciona a los eventos de enfoque y los eventos del teclado.

¿Hay alguna manera de iterar sobre el objeto de estilo en JQuery y copiar los atributos CSS definidos al nuevo objeto de estilo de objetos?

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

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

Este es el problema que ocurre al usar la función aquí: 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;

preguntado el 05 de febrero de 12 a las 01:02

Cualquier razón p no está usando una clase? Entonces podrías simplemente agregar la clase a la textarea. -

@mrtsherman Estoy creando un actualizador de sitios web que convierte cualquier elemento de la clase "actualizable" en un elemento de área de texto para que pueda editar su contenido. Entonces, a veces, el elemento p puede / puede no ser parte de una clase, puede tener un estilo en línea, etc. Así que no puedo confiar en copiar el id y las clases para estar seguro de que todo el estilo se ha traducido.

1 Respuestas

Solo usa html5's contenteditable si no es necesaria la compatibilidad con el navegador antiguo.

http://jsfiddle.net/rDJMv/1

<div contenteditable>hello world</div>

O con jQuery

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

Respondido 05 Feb 12, 06:02

Agradezco tu comentario pero no puedo solo use HTML5 porque no es algo que todos los usuarios puedan usar (todavía no todos los navegadores son compatibles con html5) - sazr

@JakeM: es compatible con todos los principales navegadores desde hace mucho tiempo. No puede simplemente eliminar una función porque es html5. Muchas funciones html5 disfrutan de una amplia compatibilidad con varios navegadores. caniuse.com/contenteditable - mrtsherman

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.