Il metodo css di jquery

Il metodo css() di jQuery modifica una proprietà del foglio stile sull'elemento selezionato.

.css(proprietà, valore)

Ad esempio, in questo script il selettore $(".blu") seleziona gli elementi a cui è associata la classe .blu

<!DOCTYPE html>
<html>
<head>
<style>
#box { width:100px; height:100px; text-align:center; background:#f00; font-size:14px; }
#clickme { width:100px; border:1px solid #000; }
.blu { color:blue; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="clickme">Click here</div>
<div>
<p>A</p>
<p>B</p>
<p class=blu>C</p>
<p>D</p>
</div>
<script>
$( "#clickme" ).click(function() {
$(".blu").css("background-color", "yellow");
});
</script>

</body>
</html>

Quando l'utente clicca sul box clickme, il selettore $(".blu") seleziona gli elementi a cui è associata la classe .blu

Poi il metodo .css("background-color", "yellow") modifica la proprietà css background-color degli elementi selezionati associandogli il valore yellow.

In questo caso, jQuery seleziona il paragrafo con la lettera C e colora di giallo lo sfondo dell'elemento.

<div>
<p>A</p>
<p>B</p>
<p class=blu>C</p>
<p>D</p>
</div>

Lo sfondo dell'elemento selezionato (C) diventa giallo.

effetto del metodo css

E così via.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

jQuery