Tuto Jquery

Manipuler Les CSS Avec Jquery

Comment manipuler les CSS avec Jquery? Jquery aide à dépasser les limites des feuilles de styles classiques en rendant possible la modification des CSS de manière dynamique directement dans le DOM, en fonction de certains événements(click, survol de la souris...).

Modifier la couleur d'un élément avec Jquery

<div id="lebouton">Le Bouton</div>
<div id="michael" style="color:black;">Michael</div>

<script>
    $( "#lebouton" ).click(function(){
        $("#michael").css( "color", "white" );
        $("#michael").css( "background-color", "black" );
    });
</script>

Connaître la taille d'un élément avec Jquery

<div id="rectangle" style="background-color:red;height:52px;width:130px;">élément à mesurer</div>

<script>
    //Affiche: 52px 130px
    alert($("#rectangle").css( "height" )+" "+$("#michael").css( "width" ));
</script>

Supprimer l'attribut style d'un élément en Jquery

<div class="cible" style="background-color:blue;">cliquer ici</div>

<script>
    $(".cible").click(function(){
        $(this).removeAttr( 'style' );
    });
</script>

Ajouter une classe à un élément Jquery

<div class="martin">Cible</div>

<script>
    $(".martin").addClass( "lutherking" );
</script>

Supprimer une classe d'un élément en Jquery

<div class="con troleur">Cible</div>

<script>
    $(".con").removeClass( "troleur" );
</script>

Vérifier l'existence d'une classe avec Jquery

<div class="gilet jaune">Cible</div>

<script>
    if ( $(".gilet").hasClass( "jaune" ) ) {
        alert("ça roule mec...");
    }
</script>