Alcuni video fa ho introdotto questo concetto di selezione degli elementi e quindi di manipolarli.
Quindi selezioniamo un H1 o tutti i tag immagine e quindi possiamo cambiare il colore o animarli o farli fare qualcosa quando
fai clic su di essi.
Finora abbiamo coperto solo la metà di selezione e questo video.
Introdurremo alcuni dei molti modi per manipolare gli elementi una volta che li abbiamo selezionati.
Quindi ecco le quattro cose principali di cui voglio parlare.
Il primo è come si modifica uno stile di elemento.
Come possiamo renderlo blu o farlo nascondere.
Cambia la dimensione del carattere.
Di seguito parleremo di aggiungere e rimuovere classi con javascript e quindi modificare il contenuto di
un tag.
Quindi, come posso cambiare il testo all'interno di un tag H-1, per esempio.
E infine cambiare gli attributi.
Quindi, come possiamo cambiare la fonte su un tag immagine o il ref su un tag AA.
Cominceremo parlando della proprietà dello stile.
è un oggetto enorme centinaia di proprietà una per ogni singola proprietà CSSA che potremmo impostare.
Quindi, quando il DOM viene costruito e viene creato un singolo nodo o viene creato un oggetto per ogni singolo
elemento, esiste una proprietà chiamata style e la proprietà style
Quindi possiamo scrivere javascript che poi passerà allo stile e agli elementi in modo diverso.
Quindi qui sto selezionando un elemento con la sua evidenziazione Id, quindi selezionalo e salvalo in una variabile chiamata tag
e quindi manipolandola.
E quello che sto facendo è ambientarmi.
Il colore del punto di stile del punto di tag è il bordo del punto di stile del punto blu tag uguale a 10 pixel di colore rosso fisso.
È importante notare che il lato destro deve essere una stringa.
Quindi, anche se in C Ss non abbiamo bisogno di mettere virgolette intorno al blu o intorno a 70 P x.
Questo non è C Ss.
Questo è javascript.
Quindi dobbiamo ancora seguire le normali regole javascript.
Così ho una semplice pagina web che ho intenzione di usare per dimostrare alcune di queste proprietà.
Quindi questa pagina web è super semplice solo un H-1 un paragrafo invece di quel paragrafo.
C'è un tag forte e poi due immagini di due adorabili mix di corgi.
e devo iniziare selezionando qualcosa e cambierò il colore e il bordo di questo H-1.
Quindi quello che farò è andare al Console
Quindi ho bisogno di selezionarlo e ci sono diversi modi per farlo in un nuovo
documento che interroga il selettore H-1.
E poi ti mostrerò lo stile H-1 che è un oggetto gigante, tonnellate e tonnellate di proprietà.
Quindi proverò a cambiare uno di loro come il colore scuro in stile H-1 e renderlo giallo.
E potresti vederlo immediatamente cambiato in giallo.
Stessa cosa con il bordo H-1 che lo stile di quel bordo equivale a fare cinque pixel in tinta unita.
E noi andiamo.
Quindi, ovviamente, se volessimo che fosse giallo con un bordo rosa.
Dal momento in cui la pagina è stata caricata non c'è motivo di usare javascript per farlo.
Lo inseriamo nel nostro file CSSA, useremmo javascript se volessimo che fosse giallo e con un bordo rosa
quando l'utente è rimasto sulla pagina per cinque secondi o se voleva che succedesse quando l'utente scorresse verso una
parte specifica di la pagina o l'utente ha fatto clic su qualcosa.
Si tratta di rendere le cose interattive e vedremo come farlo a breve.
è che se ti ritrovi a manipolare un gruppo di file su un
singolo elemento come sto facendo qui e cambiando cinque diverse proprietà su questo tag c'è sicuramente un modo migliore.
Beh, la cosa bella dell'utilizzo della proprietà style
E ci sono alcuni motivi per cui esiste un modo migliore.
Il primo è che questo non è un codice molto asciutto.
C'è un sacco di stile taggato stile tagged ripetuto.
Ancora più importante anche se c'è questo concetto chiamato la separazione delle preoccupazioni.
Quindi la separazione delle preoccupazioni è questo concetto che il nostro H M L R C S non è javascript.
Ciascuno è responsabile del proprio piccolo dominio e noi non lo vogliamo.
Non vogliamo un sacco di crossover tra di loro.
Quindi in questo diagramma puoi vedere che c'è un po 'di crossover tra ogni squadra con la quale
è la struttura e javascript che è quel comportamento e quindi vedere valutare è la presentazione.
E c'è un po 'di sovrapposizione con H html javascript ma ricorda che prima c'era
C Ss, dovevi scrivere i tuoi stili individualmente in ogni singolo elemento in cui effettivamente utilizziamo
l'attributo style.
In quel caso la nostra presentazione è stata effettivamente intessuta nella struttura e con C Ss ora
li abbiamo separati.
Quindi il nostro HMO è pura struttura e quindi il nostro successo è puro stile.
Quindi, quello che javascript si adatta è che dovrebbe controllare il comportamento di una pagina e, a volte,
ciò significa cambiare il modo in cui le cose appaiono, piuttosto che cambiare semplicemente le proprietà all'interno del javascript
che effettivamente fa lo styling in javascript.
Quello che possiamo fare è accenderli e spegnerli all'interno del file CSSA.
Quindi uno dei pattern che è molto comune è che definiamo una classe CSSA come highlight e che la classe
highlight avrà cinque o sei o comunque molte proprietà differenti che stiamo cambiando.
E quindi possiamo selezionare un elemento con javascript e dargli quella classe highlight.
Quindi in Javascript con una riga possiamo aggiungere una classe che cambierà cinque proprietà differenti.
Diamo un'occhiata a come questo sarebbe stato implementato in Javascript.
Quindi, piuttosto che selezionare un tag e quindi cambiare lo stile, ma il colore deve essere blu e poi il bordo stilizzato
deve essere 10 pixel rosso fisso, quello che potremmo fare è trovare una classe in quella classe che possa essere chiamata qualsiasi cosa.
Di solito vuoi che sia alquanto significativo per riflettere ciò che la classe dovrebbe fare.
È qualcosa che viene evidenziato o è una risposta corretta.
Un punteggio elevato per qualunque ragione tu stia applicando la lezione cercando di trovare un buon nome.
Quindi questo non è un buon nome, ma in alcune classi alcune classi stanno cambiando il colore in blu
e 10 pixel in rosso.
Quindi tutto ciò che devo fare è selezionare il mio tag e quindi tagare dot class list dot aggiungere qualche classe e
questo darà al mio tag l'idea di evidenziare una nuova classe chiamata qualche classe in tutti questi
stili verranno applicati.
Ci sono alcune altre cose che possiamo fare con l'elenco delle classi.
Quindi in questo esempio mostrerò tre metodi che abbiamo già visto e che è come aggiungere una classe remove che
prende un nome di classe e rimuove il nome di classe dall'elenco classe e quindi l'elenco di classi
che è estremamente utile.
Prende un nome di classe.
E se l'elemento dato ha già quella classe, lo rimuoverà se l'elemento non ha quella
classe, quindi lo accenderò.
Quindi molto molto utile.
Lo useremo tutto il tempo più tardi.
Lascia che te lo dimostri prima di tornare al mio esempio qui.
In realtà sto per definire una nuova classe.
Quindi, piuttosto che creare un nuovo foglio di stile e utilizzare un collegamento, userò semplicemente un tag di stile solo per
il tempo.
Quindi definirò una classe che la chiamerai grande.
E quello che ho intenzione di fare è cambiare la dimensione del font in 100 pixel e cambiare il colore in arancione.
E infine diamo un bordo rosso scuro a cinque pixel.
Quindi lo lascerò a quello.
Se aggiorno la mia pagina non cambia nulla, ma quando voglio applicare questa classe a qualcosa.
Quindi ho intenzione di fare in modo che questo paragrafo abbia la grande classe per farlo che ho bisogno di selezionarlo finora.
Il paragrafo equivale a documentare il paragrafo relativo al selettore di query.
OK.
Cominciamo dando un'occhiata all'elenco delle classi e puoi vedere che è vuoto.
Non ci sono ancora classi assegnate a questo paragrafo.
Quindi, se voglio assegnarne uno, tutto quello che devo fare è aggiungere l'elenco delle classi P-Dub e aggiungere
la classe big.
E noi andiamo.
Quindi riflette automaticamente le nuove modifiche dal mio foglio di stile.
Tutto quello che dovevo fare è aggiungere la grande classe.
Quindi spero che tu possa vedere che questo è molto più facile e che stiamo separando le responsabilità.
Quindi tutto ciò che fa javascript è di attivare o disattivare una parte specifica delle SS
piuttosto che manipolare manualmente le singole proprietà.
Ora stiamo semplicemente cambiando le cose il meno possibile invece del nostro Javascript.
Quindi, se voglio rimuoverlo tutto ciò che devo fare è fare in classe classless non rimuovere big e il mio preferito che
ho menzionato è super utile è toggle.
Quindi se premo toggle in questo momento e premi invio non c'è una classe assegnata, quindi la assegnerà
alla classe.
Ora il grande è già assegnato, quindi lo rimuoverà.
Quindi questo è utile ovviamente non in questo caso per rendere questo pazzo arancione nella classe di font enormi, ma quello che potremmo fare è qualcosa di simile a
una lista di cose da fare se vogliamo che l'utente sia in grado di fare clic su di esso per farlo.
E questo lo cancellerà.
Ma possono fare nuovamente clic e poi si annulleranno o torneranno alla normalità.
Sarebbe fatto.
Oppure potremmo farlo attivando una classe in modo da avere una classe chiamata done e faccio di nuovo clic
su applicato.
È rimosso.
Questo è solo un esempio di quando potresti usare l'interruttore.
Ma è davvero molto utile.
L'ultimo punto che tratterò sulla lista delle classi è che tecnicamente non è un array.
Ciò significa che dobbiamo utilizzare un annuncio per aggiungere una classe.
Non possiamo fare qualcosa come push.
Quindi, solo una nota minore, ma è importante sapere che non è tecnicamente un array.
Quindi abbiamo coperto due diversi modi di manipolare lo stile attraverso il nostro javascript.
facendo manualmente una proprietà alla volta che è onestamente bene se stai facendo solo una o due cose.
Il primo lo sta
Ma se lo fai in un batch o lo fai su più elementi, è molto meglio lo stile
più convenzionale per usare una classe e basta accendere o spegnere la classe