¿Cómo puedo obtener una lista de todos los atributos del elemento css con jQuery?

Necesito obtener la lista de elementos de todos los atributos de css. Cómo puedo hacer eso ?¿Cómo puedo obtener una lista de todos los atributos del elemento css con jQuery?

Fuente

2009-09-24 newbie

¿Quieres obtener todas las propiedades de un css de un elemento? – rahul

Sí, necesito obtener todos los atributos CSS que tiene mi elemento seleccionado. – newbie

relacionado: http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element – Aziz

Copiando la fuente desde SO1004475 - jQuery CSS plugin that returns computed style of element to pseudo clone that element? - Por favor, siga el enlace y el votaciones arriba allí si lo encuentra útil.

Parece ridículo, pero esta es probablemente su mejor opción - hace que .css() sin argumentos obtenga un objeto con todo este conjunto de cosas.

jQuery.fn.css = (function(css2) { 
    return function() { 
     if (arguments.length) { return css2.apply(this, arguments); } 
     var attr = ['font-family','font-size','font-weight','font-style','color', 
      'text-transform','text-decoration','letter-spacing','word-spacing', 
      'line-height','text-align','vertical-align','direction','background-color', 
      'background-image','background-repeat','background-position', 
      'background-attachment','opacity','width','height','top','right','bottom', 
      'left','margin-top','margin-right','margin-bottom','margin-left', 
      'padding-top','padding-right','padding-bottom','padding-left', 
      'border-top-width','border-right-width','border-bottom-width', 
      'border-left-width','border-top-color','border-right-color', 
      'border-bottom-color','border-left-color','border-top-style', 
      'border-right-style','border-bottom-style','border-left-style','position', 
      'display','visibility','z-index','overflow-x','overflow-y','white-space', 
      'clip','float','clear','cursor','list-style-image','list-style-position', 
      'list-style-type','marker-offset']; 
     var len = attr.length, obj = {}; 
     for (var i = 0; i < len; i++) { 
      obj[attr[i]] = css2.call(this, attr[i]); 
     } 
     return obj; 
    }; 
})(jQuery.fn.css);

Tenga en cuenta que esto no captura todas las posibles propiedades de CSS, especialmente las nuevas para CSS3. Aquí hay un list of all standard CSS and stable CSS3 properties, y aquí está uno de hyphen-prefixed vendor-specific properties (como -moz-border-start). Si realmente los quieres a todos, puedes recogerlos de allí.

Fuente

2009-09-24 12:04:56 gnarf

Esto es enorme .................... – rahul

Estoy de acuerdo, pero creo que es lo que el OP estaba pidiendo. – gnarf

Editado para evitar contaminar el espacio de nombres 'jQuery.fn' con una función' css2'. De lo contrario, esto es genial. –

Para los estilos en línea:

var styles = $("#someelement").attr("style");

A partir de ahí, usted debería ser capaz de dividir esta cadena si necesita un lazo con los estilos.

Para comprobar los estilos individuales, compruebe la documentación:

http://docs.jquery.com/CSS

Fuente

2009-09-24 11:39:10 ScottE

Necesito también los atributos que se establecen en css – newbie

si eso es posible – newbie

Quizás explique lo que Tratando de lograr en tu pregunta. Puede ser mejor que busque estilos individuales, o use clases y use .hasClass() - gnarf tiene un enlace debajo de lo contrario – ScottE

-4

$("#div1).css("background-color");

devolverá la propiedad color de fondo de un elemento con div1 ID.

css(name)

Lo sentimos, no sé una manera de conseguir todos los atributos CSS con jQuery.

Fuente

2009-09-24 11:39:38 rahul

A partir de jQuery 1.8, que puede hacer:

$("#yourElement").css("cssText");

que utiliza el window.getComputedStyle(element).cssText subyacente. Esa es la forma más simple.

Fuente

2013-04-13 12:25:45

Esta respuesta es probablemente la mejor del grupo ... – EJTH

@EJTH Soy el autor de ese código dentro de jQuery ;-) –

¡Gracias!¡Me ayudaste a resolver el problema de mover cosas a un contenedor determinado en el dom sin perder el estilo! :-) Lo uso para un proyecto de mascotas, hacer que una página HTML se rompa con box2d ... – EJTH

¿Cómo puedo obtener una lista de todos los atributos del elemento css con jQuery?

Respuesta

Cuestiones relacionadas