jQuery css(), metodo per formattare elementi di una pagina

jQuery css() method è il metodo che serve a dare una formattazione ad uno o più elementi di una pagina web. Con jQuery css() infatti posso dare, ad esempio, un colore di sfondo ad un paragrafo oppure un colore di testo ad un titolo e così via.

La sintassi è dunque molto semplice: css(“nome_proprietà“). Dove nome_proprietà è una proprietà dei css, ad esempio color, background-color, ecc.

Oppure si può anche indicare il valore della proprietà seguendo la seguente sintassi: css(“nome_proprietà“,”valore“). Ad esempio posso scrivere come proprietà color e come valore red.

Esempio di utilizzo di jQuery css()

Vediamo, dunque, nel dettaglio, un esempio di utilizzo del metodo jQuery css(), formattando semplicemente dei testi.

Quindi cliccando sul pulsante read more, i paragrafi dell’esempio sotto cambieranno formattazione.

Benvenuti su Coding Creativo! Il testo diventerà verde

Banner Pubblicitario

Secondo paragrafo. Diventerà grigio

Per realizzare l’esempio precedente innanzitutto aggiungiamo il collegamento alla CDN jQuery nella nostra pagina html, tra il tag di apertura e chiusura di head.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Dopo, nella pagina html, all’interno del tag body, inseriamo i paragrafi a cui vogliamo cambiare la formattazione e il pulsante che genera l’evento.

<div class="testo">
  <p id="intro">
    Benvenuti su Coding Creativo! Il testo diventerà verde
  <p>
  <p id="intro2">
    Secondo paragrafo. Diventerà grigio
  <p>
</div>

<button id="scopri">Read more</button>

Infine creiamo il nostro script utilizzando il metodo css che assegnerà al primo paragrafo il colore del testo rosso e al secondo invece unno sfondo grigio.

Ecco dunque lo script che utilizza il metodo jQuery css() che chiamo ad esempio script.js.

Banner pubblicitario

$(document).ready(function(){
  $("#scopri2").click(function(){
  $("#intro").css("color", "#999900");
  $("#intro2").css("background-color", "#cccccc");
  });
});

Aggiungiamo infine il collegamento allo script nella pagina html, prima della chiusura del body.

<script src="script.js" charset="utf-8"></script>

Esempio 2 sul metodo jQuery css()

In questo secondo esempio scopriremo come dare più di una formattazione ad un elemento. Ad esempio vogliamo che il primo paragrafo abbia sfondo grigio e testo giallo, dimensione del testo giallo, in grassetto e con distanza del testo dai bordi di 10 pixel.

Poi vogliamo che il secondo paragrafo abbia colore di sfondo verde, testo grigio, dimensione 22 pixel e che sia in corsivo.

Benvenuti su Coding Creativo!

Secondo paragrafo.

Quindi al solito includiamo la libreria:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Dopo inseriamo i due paragrafi ed il pulsante:

<div class="introduzione">
  <p id="testo">
    Benvenuti su Coding Creativo!
  <p>
  <p id="testo2">
    Secondo paragrafo.
  <p>
</div>

<button id="scopri2">Read more</button>

Infine inseriamo la nostra semplicissima funzione che utilizza al suo interno il jQuery css() method.

<script type="text/javascript">
$(document).ready(function(){
  $("#scopri2").click(function(){
       $("#testo").css({
               "background-color": "#999999",
               "color": "yellow",
               "font-size": "20px",
               "font-weight": "bold"
       });
       $("#testo2").css({
               "background-color": "#777700",
               "color": "#999999",
               "font-size": "22px",
               "font-style": "italic"
       });
     });
});
</script>

Chiaramente questi sono solo dei semplicissimi esempi d’uso del jQuery css() method, più avanti vedremo tante altre applicazioni.

Lezione precedente: jQuery show() method

Lezione successiva: jQuery addClass()