# jQuery.css(): control de propiedades de estilo CSS

jQuery.css() facilita la modificación de las **propiedades de estilo CSS** directamente a través de JavaScript, evitando la necesidad de complicadas manipulaciones en el DOM o detallados selectores de CSS en jQuery. Su fácil uso favorece, por tanto, cambios rápidos y precisos en el diseño de tu página web.

## ¿Qué es el método jQuery.css()?

jQuery.css() permite tanto obtener como modificar el **valor de las propiedades CSS específicas**. Puedes utilizarlo en eventos junto con jQuery.on() o en animaciones con el método [jQuery.animate()](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-animate/). Si necesitas modificar las propiedades de múltiples elementos similares, puedes utilizar jQuery.css() junto con [jQuery.each()](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-each/). Si utilizas [jQuery en WordPress](https://www.ionos.mx/digitalguide/hosting/blogs/wordpress-jquery/), la integración de jQuery.css() es perfecta y no requiere dependencias adicionales.

Consejo El [hosting con espacio ilimitado](https://www.ionos.es/alojamiento/espacio-web "Alquila espacio web con IONOS") de IONOS ofrece soluciones escalables que te permiten escoger tus recursos según tus necesidades. La infraestructura es robusta y garantiza que tu página web esté siempre online y disponible para los visitantes. Además, puedes ampliar tu paquete de hosting de forma flexible para adaptarlo al crecimiento de tu empresa.

## ¿Cómo es la sintaxis del método jQuery.css()?

La sintaxis de jQuery.css() es la siguiente:

```jQuery
$(selector).css(property, value);
```

En el parámetro `property` puedes especificar la propiedad CSS cuyo valor quieres modificar y en `value` puedes introducir el nuevo valor en forma numérica o de cadena.

Además, puedes consultar o modificar varias propiedades CSS al mismo tiempo al pasar un objeto con **pares propiedad-valor**:

```jQuery
$(selector).css({property1: value1, property2: value2, ...});
```

Puedes refrescar y actualizar tus conocimientos sobre jQuery en nuestro [tutorial de jQuery](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-tutorial-de-integracion-y-primeros-pasos/).

Consejo La [API de IONOS](https://developer.hosting.ionos.es "API de IONOS para desarrolladores") proporciona una plataforma eficiente para automatizar tareas y procesos. Te permite programar la gestión de los servicios de IONOS, así como crear y configurar recursos sin la necesidad de intervenir manualmente. Esto se traduce en un ahorro de tiempo considerable y una reducción de los errores humanos.

## Un ejemplo de uso de jQuery.css()

A continuación, te mostramos un ejemplo concreto del funcionamiento de jQuery.css():

```jQuery

<html>
<head>
    <title>jQuery.css() example</title>
    <style>
        .myElement {
            width: 200px;
            height: 100px;
            background-color: blue;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="myElement">This is an example text</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".myElement").css("background-color", "red");
            $(".myElement").css("color", "green");
            var fontSize = $(".myElement").css("font-size");
            console.log("Font-Size:", fontSize);
        });
    </script>
<div class="hash d-none" hidden>hash_7344413e02dba3d6fdb81e21d817956e986a65f7</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

En este ejemplo, tenemos un elemento HTML con la clase `myElement` que originalmente tenía un fondo azul, texto blanco y un tamaño de fuente de 20 píxeles. Al utilizar jQuery.css(), cambiamos el color de fondo del elemento a rojo (`$(".myElement").css("background-color", "red");`) y el color de la fuente a verde (`$(".myElement").css("color", "green");`). Además, utilizamos el método `$(".myElement").css("font-size")` para consultar el tamaño actual de la fuente del elemento y mostrarlo en la consola.

Este ejemplo demuestra que puedes modificar diversas propiedades de estilo CSS en jQuery para personalizar el aspecto de tu página web.

Consejo Con [Deploy Now](https://www.ionos.es/alojamiento/deploy-now "Despliegues automáticos con IONOS") de IONOS, diseñado para páginas web estáticas y aplicaciones de una sola página, tendrás acceso a una interfaz de usuario fácil de usar y a un proceso de despliegue automatizado. La configuración rápida te permite configurar tu aplicación fácilmente sin tener que lidiar con pasos de configuración tediosos.


This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-css/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-css/) for AI/LLM consumption.