Lezione #id-jq-2013-0007#
Con JQuery possiamo rilevare e manipolare i parametri CSS..

Metodo: css() -> diapositiva verso il basso

Vediamo la sintassi corretta:

1
2
3
4
5
6
7
8
9
10
11
/* RILEVA LA PROPRIETA' CSS */
/* css("propertyname"); */
$("p").css("background-color");
 
/* MODIFICA UNA PROPRIETA' CSS */
/* css("propertyname","value"); */
$("p").css("background-color","yellow");
 
/* MODIFICA PIU' PROPRIETA' CSS */
/* css({"propertyname":"value","propertyname":"value",...}); */
$("p").css({"background-color":"yellow","font-size":"200%"});

Vediamo un’applicazione pratica.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
  
<head>
<title>Titolo del documento</title>
 
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
 
<script>
$(document).ready(function(){
  $("#riconosci").click(function(){
    alert("Background color = " + $("p").css("background-color"));
  });
  $("#giallo").click(function(){
    $("p").css("background-color","yellow");
  });
  $("#multiple").click(function(){
    $("p").css({"background-color":"green","font-size":"200%"});
  });
});
</script>
 
</head>
  
<body>
<p style="background-color:#ff0000">Questo è un paragrafo.</p>
<button id="riconosci">Riconosci il colore di background del paragrafo</button><br><br>
<button id="giallo">Setta il colore di background del paragrafo a giallo</button><br><br>
<button id="multiple">Setta proprità multiple per il paragrafo</button><br>
</body>
  
</html>

Vedi il codice in azione! >

Il mio sito ufficiale>