jQuery css()

jQuery css() method è il metodo che serve a dare una formattazione a 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à“);

Esempio di utilizzo di jQuery css()

Vediamo subito un esempio di utilizzo di jQuery css(), formattando dei testi.

Benvenuti su Coding Creativo! Il testo diventerà verde

Secondo paragrafo. Diventerà grigio

Al solito aggiungiamo la seguente libreria:

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

Dopo 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 sfondno grigio.

Ecco dunque lo script che utilizza il jQuery css() method.


<script type="text/javascript">
$(document).ready(function(){
  	  $("#scopri2").click(function(){
	  $("#intro").css("color", "#999900");
          $("#intro2").css("background-color", "#cccccc");
  });
});
</script>

Esempio 2

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.

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *