# jQuery.css(): come manipolare gli elementi di stile CSS

Con jQuery.css() puoi modificare le **proprietà dello stile CSS** direttamente tramite JavaScript senza dover utilizzare uno scomodo accesso al DOM o selettori CSS dettagliati. La sua facilità d’uso favorisce quindi l’apporto di modifiche rapide e precise al design del tuo sito web.

## Che cos’è il metodo jQuery.css()?

Il metodo jQuery.css() ti permette di richiamare o cambiare il **valore di una determinata proprietà CSS**. La funzione può essere utilizzata anche per gli eventi con jQuery.on() o per le animazioni per mezzo di [jQuery.animate()](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-animate/). Se desideri manipolare le proprietà di più elementi dello stesso tipo, è utile ricorrere alla funzione jQuery.css() in combinazione con [jQuery.each()](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-each/). Se invece utilizzi [jQuery su WordPress](https://www.ionos.it/digitalguide/hosting/blog/wordpress-jquery/), l’integrazione di jQuery.css() è perfetta e non richiede l’uso di altre dipendenze supplementari.

Consiglio Lo [spazio web](https://www.ionos.it/hosting/spazio-web "Spazio web con IONOS") di IONOS mette a tua disposizione soluzioni scalabili che ti permettono di scegliere le risorse in base alle tue esigenze. Grazie alla stabile infrastruttura di queste soluzioni, i tuoi siti web sono sempre online e raggiungibili dagli utenti. Inoltre, puoi espandere il tuo pacchetto hosting in modo flessibile per restare al passo con la crescita della tua impresa.

## Qual è la sintassi del metodo jQuery.css()?

La sintassi di jQuery.css() si presenta così:

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

Con il parametro `property` si indica la proprietà CSS di cui si vuole richiamare il valore, mentre `value` è il nuovo valore in formato numerico o presentato come serie di caratteri.

È possibile anche rilevare o manipolare più proprietà CSS contemporaneamente specificando un oggetto con **coppie proprietà-valore**:

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

Con il nostro [tutorial su jQuery](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tutorial-di-jquery-installazione-e-primi-passi/) puoi ripassare i concetti di jQuery, se necessario.

Consiglio L’[API di IONOS](https://developer.hosting.ionos.it/ "Portale API per sviluppatori di IONOS") è un pratico strumento per l’automazione di attività e processi. Ti permette di gestire i servizi IONOS tramite programma, creare e configurare risorse, senza la necessità di interventi manuali. Il suo scopo è farti risparmiare tempo e ridurre gli errori umani.

## Esempio di applicazione di jQuery.css()

Le parti seguenti descrivono l’uso di jQuery.css() con un esempio pratico:

```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_771a8e5be7c779edd81b33de931a0f2c055a99c6</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>
```

In questo esempio troviamo un elemento HTML con la classe `myElement`, che inizialmente presenta uno sfondo blu, testo in bianco e una dimensione del carattere di 20 pixel. Con jQuery.css() cambiamo il colore dello sfondo passando al rosso (`$(".myElement").css("background-color", "red");`) e il colore del carattere passando al verde (`$(".myElement").css("color", "green");`). Inoltre, applichiamo il metodo `$(".myElement").css("font-size")` per richiamare l’attuale dimensione del carattere dell’elemento e visualizzarla sulla console.

Allo stesso modo è possibile modificare una gran varietà di proprietà di stile CSS e cambiare quindi l’aspetto del nostro sito web dinamicamente.

Consiglio [Deploy Now](https://www.ionos.it/hosting/deploy-now "Deploy Now di IONOS") di IONOS per siti web statici e applicazioni a pagina singola mette a tua disposizione un’interfaccia user-friendly e possibilità di implementazione automatica. La rapidità di impostazione ti permette di configurare comodamente la tua applicazione senza dover affrontare complesse procedure di configurazione.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-css/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-css/) for AI/LLM consumption.