Lezione #id-jq-2013-0007#
Con JQuery possiamo rilevare e manipolare i parametri CSS..
Metodo: css() -> diapositiva verso il basso
Vediamo la sintassi corretta:
/* 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.
<!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>