Een paar video's geleden introduceerde ik het concept van het selecteren van elementen en vervolgens te manipuleren.
Daarom selecteren wij een H1 of alle image-tags en dan kunnen we de kleur veranderen of animeren hen of ze iets doen als u klikt op hen.
Tot nu toe hebben we alleen betrekking op het selecteren helft en deze video.
We gaan een paar van de vele manieren om elementen te manipuleren zodra we ze hebben gekozen te introduceren.
Dus hier zijn de vier belangrijkste dingen die ik wil om over te praten.
De eerste is hoe kunnen we veranderen een element stijl.
Hoe kunnen we maken het blauw of te verbergen.
Verander de lettergrootte.
Next up we praten over het toevoegen en verwijderen van klassen met javascript en dan veranderen van de inhoud van een tag.
Dus hoe kan ik de tekst binnen van een H-1 tag bijvoorbeeld veranderen.
En dan tot slot het veranderen van attributen.
Dus hoe kunnen we veranderen de bron op een afbeelding tag of de scheidsrechter op een AA-tag.
We gaan aan de slag door te praten over de eigenschap stijl.
Dus toen de DOM wordt gebouwd en een individueel knooppunt is gemaakt of een object is gemaakt voor elk element is er een eigenschap genaamd stijl en de eigenschap stijl is een groot object honderden objecten één voor elke CSSA eigenschap die we konden stellen.
Dus we kunnen javascript die vervolgens zal gaan stijl en element anders schrijven.
Dus hier ben ik het selecteren van een element door zijn Id hoogtepunt dus selecteert u deze opslaan in een variabele met de naam tag en vervolgens manipuleren.
En wat ik doe Ik ben het opzetten.
Tag dot dot stijl kleur is blauw tag dot stijl dot grens is gelijk aan 10 pixels solide rood.
Het is belangrijk op te merken dat de rechterzijde een string moet zijn.
Dus ook al in C Ss we niet hoeven te aanhalingstekens rond blauw of rond 70 P x zetten.
Dit is niet C Ss.
Dit is javascript.
Dus we hebben nog steeds de reguliere javascript regels te volgen.
Dus ik heb een eenvoudige webpagina opgezet die ik ga gebruiken om een ​​aantal van deze eigenschappen aan te tonen.
Dus deze webpagina is super eenvoudig slechts één H-1 een paragraaf in plaats van die paragraaf.
Er is een sterke tag en vervolgens twee beelden van twee schattige corgi mixen.
Dus wat ik ga doen is naar de consul en ik moet om te beginnen door iets te selecteren en ik ga naar de kleur en de grens van de H-1 te veranderen.
Dus ik nodig om het te selecteren en er zijn meerdere manieren om dat te doen in een nieuw document dat vraagt ​​selector H-1.
En dan ga ik je laten zien H-1 stijl die is een gigantisch object tonnen en tonnen van eigenschappen.
Dus ik ga proberen het veranderen van een van hen, zoals H-1 stijl donkere kleur en maken dat geel.
En je kon zien dat het onmiddellijk veranderd naar geel.
Hetzelfde met de grens H-1, die stijl die grens gelijk laten we vijf pixels stevige roze.
En daar gaan we.
Dus natuurlijk als we wilden dit naar geel met een roze rand zijn.
Vanaf het moment dat de pagina geladen is er geen reden om javascript te gebruiken om dat te doen.
We hebben het gewoon in onze CSSA bestand dat we zouden gebruiken javascript als we wilden het bleek geel en hebben een roze rand wanneer de gebruiker op de pagina is geweest gedurende vijf seconden of als hij wilde het gebeuren wanneer de gebruiker gescrold om een ​​specifiek deel van de pagina of de gebruiker heeft geklikt op iets.
Het draait allemaal om het maken van dingen interactief en we zullen zien hoe dat binnenkort doen.
Nou, de leuke ding over het gebruik van het onroerend goed stijl is dat als je merkt dat je het manipuleren van een bos van bestanden op een individueel element alsof ik hier aan het doen en het veranderen van vijf verschillende eigenschappen op deze ene tag is er zeker een betere manier.
En er zijn een paar redenen dat er een betere manier.
De eerste is dat dit niet erg droog code.
Er is een hoop herhaalde uitgetikt stijl tag stijl.
Belangrijker nog is dat er dit concept genaamd de scheiding van bezorgdheid.
Dus de scheiding van zorgen is dit concept dat onze H M L R C S is niet javascript.
Zijn elk verantwoordelijk voor hun eigen kleine domein en we willen het niet.
We willen niet veel cross-over tussen hen.
Dus in dit schema kun je zien dat er een beetje van crossover tussen elk team met wat de structuur en de javascript die dat gedrag en dan zien te beoordelen, is de presentatie.
En er is een kleine overlap met H html javascript maar vergeet niet dat het vroeger vóór C Ss kwam moest je je stijlen individueel te schrijven in elk element waar we eigenlijk de stijl attribuut.
In dat geval is de presentatie was de styling eigenlijk verweven in de structuur en met C Ss nu hebben we ze afgescheiden.
Dus onze HMO is pure structuur en dan ons succes is pure stijl.
Dus wat javascript past is dat het gedrag van een pagina moet controleren en soms is dat betekent dat het veranderen van hoe de dingen te kijken, maar in plaats van alleen het veranderen van de eigenschappen in de javascript daadwerkelijk doen van de styling in de javascript.
Wat we wel kunnen doen is zet ze in en uit de binnenkant van de CSSA bestand.
Dus een van de patronen dat is echt gemeen hebben is dat we definiëren een CSSA klasse als hoogtepunt en dat hoogtepunt klasse zal vijf of zes of echter veel verschillende eigenschappen die we hebben veranderende.
En dan kunnen we dan selecteert u een element met javascript en geef het dat hoogtepunt klasse.
Dus in Javascript met één lijn kunnen we een klasse die vervolgens vijf verschillende eigenschappen zal veranderen toe te voegen.
Laten we eens kijken hoe dit in Javascript zouden worden uitgevoerd.
Dus in plaats van het selecteren van een tag en dan het veranderen van stijl, maar de kleur blauw te zijn en dan gestyled tot grens naar 10 pixel stevige rode wat we in plaats daarvan kunnen doen is het vinden van een klasse in deze klasse kan van alles worden genoemd.
Meestal je wilt dat iets zinvol zijn, zodat als gevolg van wat de klas verondersteld wordt te doen.
Is het iets dat wordt gemarkeerd of is het een juist antwoord.
Een hoge score voor welke reden dan ook dat je het toepassen van de klas het proberen te komen met een goede naam.
Dus dit is niet een goede naam, maar sommige klasse wat klasse is het veranderen van de kleur blauw en de grens 10 pixel solide rood.
Dan is alles wat ik moet doen is het selecteren van mijn label en dan taggen dot dot klasse lijst toe te voegen wat klasse en dat zal mijn tag met het idee van het hoogtepunt van een nieuwe klasse met de naam een ​​klasse in al deze stijlen zal worden toegepast geven.
Er is een paar andere dingen die we kunnen doen met klasse lijst.
Dus in dit voorbeeld toon ik drie methoden toe te voegen die we al zagen dat is hoe we een klasse te verwijderen die een klasse naam dankt kunt toevoegen en het verwijdert die klasse naam uit de klas lijst en klasse lijst toggle, die is uiterst nuttig.
Het duurt een klasse naam.
En als het opgegeven element heeft die klasse al zal het dan verwijderen als het element niet hebben dat klasse dan zal ik deze in te schakelen.
Dus heel erg nuttig.
We gebruiken de hele tijd later.
Dus laat me laten zien dat je voordat ik terug naar mijn voorbeeld hier te gaan.
Ik ben eigenlijk van plan om een ​​nieuwe klasse te definiëren.
Dus in plaats van het maken van een nieuwe stijl blad en met behulp van een link Ik ga gewoon naar een stijl tag alleen omwille van de tijd.
Dus ik ga een klasse je gewoon gaat om het grote roepen definiëren.
En wat ik ga doen is de lettergrootte 100 pixels en de kleur oranje te zijn.
En dan tot slot laten we het eens een grens van vijf pixel stevige rode.
Dus zal ik het bij laten.
Als ik mijn pagina verandert er niets natuurlijk vernieuwen, maar als ik wil doen is toe te passen die klasse iets.
Dus ik ga maken deze paragraaf hebben de grote klasse te doen dat ik nodig om het zo ver te selecteren.
Paragraaf gelijk documenteren die vraag selector paragraaf.
OK.
En laten we beginnen met het nemen van een blik op de klasse lijst en je kunt zien dat het leeg is.
Er zijn geen lessen nog toegewezen aan deze paragraaf.
Dus als ik wil een toewijzen alles wat ik moet doen is zeggen P-Dub class lijst dot toe te voegen en ik wil de klasse grote voegen.
En daar gaan we.
Dus het weerspiegelt automatisch de nieuwe veranderingen ten opzichte van mijn style sheet.
Alles wat ik moest doen is het toevoegen van de grote klasse.
Dus hopelijk kun je zien dat dit een stuk gemakkelijker en dat we het scheiden van de verantwoordelijkheden.
Dus al die javascript doet is blijkt aan of uit een specifiek deel van de SS in plaats van daadwerkelijk handmatig manipuleren van individuele eigenschappen.
We zijn nu alleen het veranderen van de dingen zo weinig mogelijk in plaats van onze Javascript.
Dus als ik wil om het te verwijderen alles wat ik moet doen is te doen klasse klassenloze niet groot te verwijderen en mijn favoriet, die ik noemde is super handig is toggle.
Dus als ik raakte toggle op dit moment en druk op enter er is geen klasse toegewezen dus het is de klasse groot zal toewijzen.
Nu groot is al toegewezen, dus het zal verwijderen.
Dus dit is nuttig duidelijk niet in dit geval om deze gekke oranje in grote lettertype klasse te maken, maar wat we zouden kunnen doen is op zoiets als een to do lijst als we willen dat de gebruiker in staat om klik erop om te doen.
En dat zal doorkruisen.
Maar ze kunnen weer klikken en dan zal het uncross out of gewoon terug naar normaal.
Dat zou gebeuren.
Of we kunnen doen met de toets een klasse, dus we konden hebben een klasse met de naam gedaan en ik klik toegepast klik nogmaals.
Het is verwijderd.
Dat is slechts één voorbeeld van wanneer je zou kunnen gebruiken toggle.
Maar het is echt heel handig.
Het laatste punt dat ik zal brengen over klasse lijst is dat het technisch gezien niet een array.
Dus dat betekent dat we een advertentie gebruiken om een ​​klasse toe te voegen.
We kunnen niet iets zoals push te doen.
Dus gewoon een kleine opmerking, maar het is belangrijk om te weten dat het technisch gezien niet een array.
Dus we bedekt twee verschillende manieren van het manipuleren van stijl door middel van onze javascript.
De eerste is het manueel doet een eigenschap in een tijd dat het is eerlijk gezegd prima als je gewoon een of twee dingen aan het doen zijn.