Obtener múltiples propiedades CSS con jQuery

Question

Sé que usted puede establecer múltiples propiedades CSS de este modo:

$('#element').css({property: value, property: value}); 

Pero ¿Cómo consigo múltiples propiedades con CSS? ¿Hay alguna solución?

Answer 1

Usted puede crear su propia función jQuery para hacer esto:

//create a jQuery function named `cssGet` 
$.fn.cssGet = function (propertyArray) { 

    //create an output variable and limit this function to finding info for only the first element passed into the function 
    var output = {}, 
     self = this.eq(0); 

    //iterate through the properties passed into the function and add them to the output variable 
    for (var i = 0, len = propertyArray.length; i < len; i++) { 
     output[propertyArray[i]] = this.css(propertyArray[i]); 
    } 
    return output; 
}; 

Aquí es una demostración: http://jsfiddle.net/6qfQx/1/ (comprobar su registro de la consola para ver la salida)

Esta función requiere una matriz que se pasará conteniendo las propiedades de CSS para buscar. Uso para esto sería algo así como: método css

var elementProperties = $('#my-element').cssGet(['color', 'paddingTop', 'paddingLeft']); 
console.log(elementProperties.color);//this will output the `color` CSS property for the selected element 

Answer 2

¿La manera más fácil? Suelta el jQuery.

var e = document.getElementById('element'); 
var css = e.currentStyle || getComputedStyle(e); 
// now access things like css.color, css.backgroundImage, etc. 

Answer 3

de jQuery (a partir de 1,9) dice que puede pasar un array de cadenas de propiedad y ha de devolver un objeto con pares clave/valor.

por ejemplo:

$(elem).css([ 'property1', 'property2', 'property3' ]); 

http://api.jquery.com/css/