Manipolazione dello Stile in jQuery

Manipolazione dello Stile in jQuery

Posso manipolare lo stile tramite .css(), .addClass(), .removeClass(), .toggleClass() .

indice

Sintassi sulla Manipolazione del DOM in jQuery

.css() // aggiunge lo stile inline all'elemento selezionato
.addClass() // aggiunge una o piu classi all'elemento selezionato
.removeClass() // rimuove una o piu classi classe all'elemento selezionato
.toggleClass() // aggiunge e rimuove una classe all'elemento selezionato

Esempio sulle Manipolazione del DOM in jQuery

You say potatoe, I say starchy carbs. Logan Broger is "amazing" and a "wonderful boy" according to Logan's mom.

testo di esempio .testo di esempio .testo di esempio .testo di esempio .testo di esempio .

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Felinamiss. I don't need a big house, just a two-floor condo - you could say I have lofty expectations.

Codice della Lezione : Manipolazione del DOM in jQuery

$(document).ready(function(){
    $('#button1').click(function(){
        // .css : aggiungi css
        $('.boxTXT > p:first').css('color','green')
    });
    $('#button2').click(function(){
        // addClass : aggiunge classi CSS
        $('.boxTXT > p:eq(2)').addClass('dotted')
    });
    $('#button3').click(function(){
        //removeClass : rimuove classi CSS
        $('.boxTXT > p:eq(2)').removeClass('dotted')
    });
    $('#button4').click(function(){
        //toggleClass : aggiunge e rimuove classi CSS
        $('.boxTXT > p:eq(3)').toggleClass('dotted')
    });
});

Scritto da Donato Pirolo

Ciao, sono Donato, frontend developer con una smisurata passione per la SEO. Creo strumenti ad hoc per aiutare aziende e professionisti ad essere cercati sul web e trovare clienti.

Potrebbero interessarti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Copyright © 2022
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram