Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci déselectionner : Ctrl D




Les tutoriaux: Index » Jquery » ScriptsJquery » CSS et jQuery

Introduction

  • Tutoriel posté par Sky
  • 2259 lectures
  • Mis en ligne le 16-09-2010
  • Dernière mise à jour le 15-10-2010
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Nous allons voir ici comment changer des éléments CSS en utilisant jQuery



EN COURS DE REDACTION

Méthodologie

Elément BODY



Créons ensemble quatre blocs div que nous nommerons rouge, bleu, noir et blanc.
Ces blocs vont nous servir de boutons pour changer la couleur de fond de notre page.

CODE HTML


	<div id="rouge"></div>
	<div id="bleu"></div>
	<div id="noir"></div>
	<div id="blanc"></div>



Voyons maintenant comment interagir avec jQery :

CODE JAVASCRIPT


    
$(document).ready(  function()
    {
       $('#rouge').click(function()
       {
	$("body").css({ background: "#ff0000" });
       });
    });



Lorsque l'on clique sur le div ayant pour id #rouge nous attribuons une nouvelle couleur à l'élément "body".
Nous pouvons maintenant faire de même pour les autres :

CODE JAVASCRIPT


    
$(document).ready(  function()
{

    $('#rouge').click(function()
    {
	$("body").css({ background: "#ff0000" });
    });
	$('#bleu').click(function()
    {
	$("body").css({ background: "#C0DEED" });
    });
	$('#noir').click(function()
    {
	$("body").css({ background: "#000" });
    });
	$('#blanc').click(function()
    {
	$("body").css({ background: "#FFF" });
    });

});



Et pourquoi ne pas changer la couleur directement par un fond d'écran image ?

CODE JAVASCRIPT


    $('#rouge').click(function()
    {
	    $("body").css({ "background" : "#87A9D6 url('bg.jpg')",  "background-repeat" : "no-repeat"});
    });



Et si nous attaquions un bloc div par exemple ?



Créons ensemble deux nouveaux blocs div

CODE HTML


	
        <div id="taille">Augmenter la taille </div>
	<div id="taille1">Diminuer la taille </div>



Et appliquons leurs le code jQuery suivant :

CODE JAVASCRIPT


    $('#taille').click(function()
    {
	$("#rouge").css("width","100px");
    });



En cliquant sur notre div ayant pour id "taille" notre bloc #rouge aura 100px de largeur.
Pour information avec cette technique jQuery ne connait pas la valeur du bloc #rouge, dans notre exemple il va juste lui attribué un width de 100px, si le bloc est déja à 100px rien ne se passera.

Pour se souvenir de la taille du bloc nous pouvons procédé comme ceci :

CODE JAVASCRIPT


    
    $('#taille').click(function()
    {
	var oldWidth = parseInt($("#rouge").css("width")); 
	$("#rouge").css("width",oldWidth +50+"px");
    });



Le code ci-dessus va incrémenter notre bloc de 50 px à chaque clic.

Allez plus loin avec .CSS() de jQuery



Documentation de .css()
Notes

  Evaluez le tutorial (4 Votes)

3
0
1

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Jquery] CSS et jQuery

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com