ASP.NET: Métodos CSS jQuery

Una vez se tiene un conjunto de resultados o “matched set”, el siguiente paso es hacer algo con él. Por ejemplo, puede que desees aplicar una clase CSS o un estilo a los elementos que contiene el conjunto de resultados. O puede que desees añadir un comportamiento, como  añadir un controlador de clic que ejecuta código cuando se hace clic sobre alguno de los elementos del conjunto. Ya se han visto algunos ejemplos de esto en los post anteriores, pero jQuery tiene mucho más que ofrecer. En este post, vamos a ver cómo trabajar con los distintos métodos de CSS.

CSS es soportado en jQuery en varias formas diferentes. Primero, está el método “css” que  permite recuperar un valor CSS específico (como el color de un elemento), y establecer una o más propiedades de CSS en un conjunto de elementos.

En segundo lugar, los métodos como addClass, removeClass, toggleClass y hasClass permiten alterar o inspeccionar las clases CSS que se aplican a los elementos. Además, un par de métodos permiten trabajar con las dimensiones y la posición de un elemento.

En este post solamente se va a hablar de los más comunes, pero puedes consultar la lista completa en el sitio web de jQuery. Los ejemplos que se muestran a continuación utilizan el mismo fragmento de HTML que se vió en el post ASP.NET: Filtros básicos jQuery, por lo que son fáciles de seguir si deseas probarlos en tu navegador.

• css(nombre, valor) : Este método permite establecer una propiedad específica de CSS en un elemento. El argumento “nombre” se refiere a una propiedad CSS (como el borde, el color, etc) y el “valor” define el estilo que que se desea aplicar. El siguiente ejemplo cambia el color de fondo del elemento h1: 
  

  $('h1').css('background-color', 'green');

• css(name) : Este método recupera el valor CSS específico de la propiedad "name" que se le pasa como argumento. El siguiente ejemplo muestra un mensaje de alerta con el texto "italic", porque ese es el estilo de la fuente del elemento <span> que se encuentra dentro del elemento h2:
  

  alert($('h2 span').css('font-style'));

  Puedes utilizar este valor en los scripts jQuery; por ejemplo, se puede utilizar para cambiar el estilo de fuente entre cursiva y normal o para configurar varios elementos con el mismo estilo.

• css(propiedades) : Este es un método de gran alcance, ya que permite establecer múltiples propiedades en el conjunto de elementos de un solo golpe. El siguiente ejemplo cambia el color de todas las celdas de la tabla a color rojo, cambia la fuente a Verdana y establece un padding de 10px. Lo que se hace es envolver el conjunto de propiedades con un par de llaves ({ }), separando la propiedad y el valor con dos puntos (:) y cada par  propiedad/valor con una coma:
  

  $('#DemoTable td').css({'color' : 'red', 'font-family' : 'Verdana', 'padding' : '10px'});

• addClass, removeClass y toggleClass : Los métodos addClass y removeClass permiten agregar y quitar clases a los elementos, respectivamente. Al igual que con el código CSS plano, es mejor utilizar estos métodos que la utilización de CSS en línea con el método css (propiedades). De esta manera, es más fácil definir clases CSS en un lugar central, lo que hace que sean más fáciles de mantener y reutilizar. El siguiente ejemplo muestra cómo asignar una clase al elemento h2: 
  

  $('h2').addClass('PleaseWait');

  Si lo que quieres es eliminar la clase de nuevo, se llama a removeClass así: 
  

  $('h2').removeClass('PleaseWait');

  El método toggleClass asigna la clase si no está presente todavía y la elimina en caso contrario.
  Los tres métodos permiten pasar múltiples clases separándolas con un espacio.

• attr(attributeName) : El método attr permite leer y establecer los valores de los atributos de los elementos HTML. Esta versión, que acepta un solo argumento, se utiliza para leer un valor existente. Para el attributeName se pasa el nombre del atributo como una cadena. El siguiente ejemplo muestra un mensaje de alerta “First Header”, que no es ni más ni menos que el atributo title de la cabecera h1:
  

  alert($('h1').attr('title'));

• attr(attributeName, valor) : La segunda versión del método attr, que acepta dos argumentos, se usa para cambiar el valor de un atributo. Además del nombre del atributo que se desea cambiar, también hay que enviar el nuevo valor para el atributo. El siguiente ejemplo marca todas las casillas de verificación en la página de prueba:
  

  $(':checkbox').attr('checked', true);

En conjunto, estos métodos CSS proporcionan un gran poder para cambiar la apariencia de los elementos en una página.

Fuente: Beginning ASP.NET 4: in C# and VB