Kilka filmów temu wprowadził tę koncepcję doboru elementów i manipulowania nimi.
Więc wybrać wszystkie znaczniki H1 lub obrazu, a następnie możemy zmienić kolor lub animować je lub uczynić je zrobić coś po kliknięciu na nich.
Do tej pory omówiliśmy jedynie wybranie pół i ten film.
Mamy zamiar przedstawić kilka z wielu sposobów na manipulowanie elementami raz wybraliśmy je.
Więc tutaj są cztery główne rzeczy, które chcę o tym mówić.
Pierwszy z nich to w jaki sposób zmienić styl elementu.
W jaki sposób możemy zrobić to niebieskie lub uczynić go ukryć.
Zmiana rozmiaru czcionki.
Następna w kolejce porozmawiamy o dodawanie i usuwanie klas z JavaScript, a następnie zmieniając zawartość znacznika.
Więc jak mogę zmienić tekst wewnątrz z H-1 znacznikiem na przykład.
A potem wreszcie zmienia atrybuty.
Jak więc zmienić źródło na tag obrazu lub ref na znacznik AA.
Mamy zamiar zacząć od rozmowy o właściwość stylu.
Więc kiedy DOM jest skonstruowany i indywidualny węzeł jest wykonany lub obiekt jest dla każdego elementu istnieje właściwość nazywa styl i właściwość stylu jest ogromny setki przedmiot własności po jednym dla każdej nieruchomości CSSA że możemy ustawić.
Tak więc możemy napisać skrypt, który będzie następnie przejść styl i elementu inaczej.
Więc tutaj jestem wybierając element jego Id podświetleniem więc wybierz go zapisać go do zmiennej o nazwie znacznika, a następnie manipulować go.
A co robię ja ustawienie.
Tag styl kropka kropki kolor jest niebieski znak kropki stylu dot granicy wynosi 10 pikseli stałe czerwone.
Ważne jest, aby pamiętać, że po prawej stronie musi być ciągiem.
Więc nawet jeśli w C Ss nie musimy umieścić w cudzysłowie niebieskim lub wokół 70 P x.
Nie jest Css.
To JavaScript.
Więc nadal musimy przestrzegać zasady regularnego javascript.
Więc mam prostą stronę internetową skonfigurować, które mam zamiar wykorzystać w celu wykazania niektóre z tych właściwości.
Więc ta strona jest bardzo proste, wystarczy jeden H-1 akapit zamiast tego ustępu.
Istnieje silna znacznik, a następnie dwa wizerunki dwóch uroczych mieszanek corgi.
Więc co mam zamiar zrobić, to udać się do konsula i muszę zacząć wybierając coś i mam zamiar zmienić kolor i granicy tego H-1.
Więc muszę go wybrać i nie ma wiele sposobów na to, że w nowym dokumencie, który odpytuje przycisk H-1.
A potem mam zamiar pokazać wam H-1, styl, który jest olbrzymi mnóstwo obiektów i mnóstwo właściwości.
Więc mam zamiar spróbować zmienić jeden z nich jak H-1 w stylu ciemnego koloru i sprawiają, że kolor żółty.
I można zobaczyć natychmiast zmieniła kolor na żółty.
To samo z pogranicza H-1, który w stylu, że granica wynosi zróbmy pięć pikseli stałe różowe.
I tam idziemy.
Tak oczywiście, jeśli chcieliśmy tylko, że jest to żółty z różowym obramowaniem.
Od czasu, gdy strona załadowanego nie ma powodu, aby użyć javascript, aby to zrobić.
Po prostu umieścić go w naszym pliku CSSA użylibyśmy JavaScript gdybyśmy chcieli okazało żółty i mieć różowy obramowanie, gdy użytkownik jest na stronie przez pięć sekund lub jeśli chce to się stało, gdy użytkownik przewija do określonej części strona lub użytkownik kliknął na czymś.
To wszystko o tworzeniu rzeczy interaktywne i zobaczymy, jak to zrobić w najbliższym czasie.
Dobrze Zaletą pomocą właściwości stylu jest to, że jeśli okaże się manipulacji kilka plików na pojedynczym elemencie jak tu robię i zmieniając pięć różnych właściwości na tym jednym znacznikiem jest zdecydowanie lepszy sposób.
I jest kilka powodów, że istnieje lepszy sposób.
Pierwszym z nich jest to, że nie jest bardzo suche kodu.
Jest wiele powtarzających się oznakowanego stylu oznakowanego stylu.
Co ważniejsze, choć nie jest to koncepcja zwana separacja obawy.
Więc oddzielenie problemów jest to, że nasza koncepcja H M L R C S nie jest JavaScript.
Czy każdy jest odpowiedzialny za ich własnym małym domeny i nie chcemy go.
Nie chcemy dużo rozjazd między nimi.
Więc w tym wykresie widać, że jest tam trochę rozjazd pomiędzy każdym zespołem, z którym jest struktura i JavaScript, który jest, że zachowanie, a następnie sprawdzić oceny jest prezentacja.
I tam jest trochę pokrywają się z H html javascript, ale pamiętam, że kiedyś przed C Ss przyszedł trzeba było napisać swoje style indywidualnie w każdym elemencie gdzie my właściwie użyć atrybutu stylu.
W tym przypadku naszego prezentacji stylizacji faktycznie wplecione w strukturę i Css teraz oddzielają je.
Więc nasz HMO jest czysta struktura i wtedy nasz sukces jest czystym stylu.
Więc co javascript pasuje to, że powinien on kontrolować zachowanie strony, a czasami to oznacza zmianę, jak wyglądają sprawy, ale zamiast po prostu zmieniając właściwości wewnątrz javascript rzeczywiście robi stylizacji w javascript.
Co możemy zrobić, to włączyć i wyłączyć wewnątrz pliku CSSA.
Więc jeden z wzorów to bardzo powszechne jest to, że możemy zdefiniować klasę CSSA jak podświetleniem i że klasa kulminacyjnym będzie miał pięć albo sześć albo jakkolwiek wiele różnych właściwości, które jesteśmy zmienia.
A potem możemy następnie wybierz element z javascript i nadać mu tę klasę podświetlenia.
Więc w JavaScript z jednej linii możemy dodać klasę, która będzie następnie zmienić pięć różnych właściwościach.
Rzućmy okiem na to, jak miałoby to być realizowane w JavaScript.
Więc zamiast wybierając znacznik, a następnie zmieniając styl, ale kolor na niebieski, a następnie będzie się stylizowany granicę być 10 piksel świeci na czerwono, co możemy zrobić zamiast tego jest znalezienie klasa w tej klasie można nazwać cokolwiek.
Zazwyczaj ma to być w pewnym stopniu odzwierciedla to, co sensowne, tak klasa ma robić.
Czy jest coś, co jest podświetlone, czy jest to poprawna odpowiedź.
Wysoki wynik z jakiegokolwiek powodu, że jesteś stosowania klasę starając wymyślić dobrego imienia.
Więc nie jest to dobra nazwa, ale niektóre klasy niektóre klasy zmienia kolor będzie niebieski i czerwony granicy stałe 10 pikseli.
Wtedy wszystko, co mam zrobić, to wybrać mój znacznik, a następnie oznaczyć listę klasy kropka kropka dodać jakąś klasę i że da mi znak z ideą podświetleniem nowa klasa o nazwie niektóre klasy w każdym z tych stylów będzie stosowana.
Jest jeszcze kilka innych rzeczy, które możemy zrobić z listy klasy.
Tak więc w tym przykładzie pokażę trzy metody dodawania które już widział co jest, jak możemy dodać klasę usuń która przyjmuje nazwę klasy i usuwa tę nazwę klasy z listy klas, a następnie listę klasy przełącznik, który jest niezwykle przydatny.
Zajmuje nazwę klasy.
A jeśli dany element ma już tej klasy będzie następnie usunąć go, jeśli element nie posiada tej klasy to będę go włączyć.
Tak bardzo, bardzo przydatna.
Będziemy go używać cały czas później.
Więc pozwól mi pokazać, że do ciebie, zanim wrócę do mojego przykład tutaj.
Ja rzeczywiście będzie zdefiniować nową klasę.
Więc zamiast tworzenia nowego arkusza stylów i za pomocą łącza Ja tylko zamiar użyć tagu styl po prostu ze względu na czas.
Więc idę do zdefiniowania klasy jesteś po prostu będzie nazwać to duże.
I co mam zamiar zrobić, to zmienić rozmiar czcionki być 100 pikseli i zmienić kolor na pomarańczowo.
A potem wreszcie dajmy mu granicę stałe czerwonym pięć pikseli.
Więc zostawiam go na to.
Gdybym odświeżyć moją stronę nic się nie zmienia oczywiście, ale kiedy chcę zrobić, to zastosować tę klasę do czegoś.
Więc idę, aby ten ustęp mają dużą klasę do zrobienia, że ​​trzeba go wybrać do tej pory.
Ustęp równa dokument, który paragraf wyboru zapytania.
OK.
I niech po prostu zacząć od przyjrzenia się liście klasy i widać, że jest pusta.
Brak zajęcia przypisane do niniejszego ustępu jeszcze.
Więc jeśli chcesz przypisać jedną wszystko, co musisz zrobić, to powiedzieć, P-Dub Lista klas dot dodawać i chcę dodać klasę wielkiego.
I tam idziemy.
Więc automatycznie odzwierciedla nowe zmiany od mojego arkusza stylów.
Wszystko co musiałem zrobić, to dodać wielką klasę.
Więc mam nadzieję, że widać, że jest to o wiele łatwiejsze, a my rozdzielenie obowiązków.
Więc wszyscy, którzy są javascript nie jest to powoduje włączenie lub wyłączenie określonej części SS zamiast faktycznie ręcznego manipulowania indywidualne właściwości.
Jesteśmy teraz po prostu zmieniając rzeczy tak mało, jak to możliwe, zamiast naszej JavaScript.
Więc jeśli chcesz go usunąć wszystko, co musisz zrobić, to zrobić klasy bezklasowego nie usuwać duże i moim ulubionym których wspomniałem jest bardzo przydatna jest przełącznik.
Więc jeśli uderzę przełączania teraz i naciśnij enter nie ma klasy przypisany więc będzie to klasa duże przypisać.
Teraz wielka jest już przypisany więc będzie go usunąć.
Więc to jest przydatne oczywiście nie w tym przypadku uczynić ten szalony pomarańczowy w ogromnej klasy czcionki, ale co można zrobić, to na coś w rodzaju listy, aby zrobić, jeśli chcemy, aby użytkownik mógł kliknąć na nim zrobić.
I że przetnie ją.
Ale mogą kliknąć ponownie i wtedy będzie uncross się lub po prostu wrócić do normy.
To będzie zrobione.
Albo możemy to zrobić poprzez przełączanie klasę, więc możemy mieć klasy o nazwie zrobione i klikam stosowane kliknij ponownie.
To usunięte.
To tylko jeden z przykładów, kiedy można użyć przełącznika.
Ale to naprawdę bardzo przydatna.
Ostatnim punktem Przyniosę się o liście klasy jest to, że nie jest to technicznie tablicą.
Więc to oznacza, że ​​mamy do wykorzystania reklamy, aby dodać klasę.
Nie możemy zrobić coś takiego naciśnięciem.
Więc po prostu drobna uwaga, ale ważne jest, aby wiedzieć, że nie jest to technicznie tablicą.
Więc objęte dwa różne sposoby manipulowania styl pośrednictwem naszego javascript.
Pierwszy z nich robi to ręcznie jedną właściwość, która w danej chwili jest to naprawdę w porządku, jeśli jesteś po prostu robi jedną lub dwie rzeczy.