Javascript Stijl toevoegen aan element

Michael Zippo

Bij het vergelijken van de CSS-klasse met de ID, is het verschil dat de CSS-klasse styling toepast op meerdere elementen. ID daarentegen past een stijl toe op een enkel element. De ID is ook bijzonder dat je een speciale URL kunt gebruiken om direct naar een element te linken en het wordt gebruikt door JavaScript.

CSS , selectors worden gebruikt om een specifiek element of meerdere elementen op een webpagina te targeten. Zodra een element is getarget, kan een stijl of een reeks stijlen op het element worden toegepast.

Er is een grote verscheidenheid aan selectors beschikbaar. Twee van de meest gebruikte zijn en ID. Beide worden gebruikt om items met de titel te targeten.

en ID-selectors

Wat is het verschil tussen n -tags > en ID ? Dit is een vraag van veel ontwikkelaars die nieuw zijn in CSS en we zullen ze in deze handleiding beantwoorden.

Tegen de tijd dat je deze handleiding hebt gelezen, weet je de verschillen tussen deze twee selectors. U beschikt over de informatie die u nodig heeft om een weloverwogen beslissing te nemen over de selectie die u in uw code wilt gebruiken. Laten we beginnen.

`CSS-selectors`

een webpagina , wilt u bepaalde stijlen toepassen op specifieke elementen van de pagina. U kunt bijvoorbeeld de tekstkleur van alle

tags op groen instellen of de lettergrootte van de koptekst wijzigen.

Selectors stellen u in staat specifieke elementen op een webpagina te targeten waarop u stijlen kunt toepassen. Er zijn veel selectors beschikbaar in CSS, zoals universele selectors, descendant selectors, child selectors en grouping selectors. Als je meer wilt weten over CSS-selectors, lees dan onze beginnershandleiding voor CSS-selectors.

 Twee selectors,  en id  , worden gebruikt voor stijlelementen op basis van respectievelijk de klasse en ID die aan een HTML-element zijn toegewezen, maar deze selectors zijn vaak verwarrend, dus we zullen onderzoeken wat elk doet.

   de id-selector is uniek  
met de id-selector kunt u stijlregels definiëren die van toepassing zijn op een enkel element  op de webpagina. Elke webpagina kan slechts één element hebben met een enkele < een  ID-kenmerk. Dit betekent dat de ID-kiezer nooit kan worden gebruikt om meer dan één element op te maken.
ID-selectors worden gedefinieerd met een hekje. Ze worden onmiddellijk gevolgd door de identiteitswaarde om waarop u een set stijlregels wilt toepassen. Hier is een voorbeeld van de identiteitskiezer in actie:
 Deze stijl is van toepassing op het 
element in ons HTML-document met de id betaBanner. De stijl stelt de achtergrondkleur van het element in op oranje en de tekstkleur in het element wit.
  De klassenkiezer is niet uniek  
met een klassenkiezer kunt u stijlregels definiëren die van toepassing zijn op elke element  met een class-attribuut dat gelijk is aan een bepaalde waarde.
Zoals hierboven vermeld, kan de identiteitskiezer niet worden gebruikt voor een elementstijl. in feite kan ID maar één keer op een webpagina worden gebruikt. de cursussen daarentegen kunnen op meerdere elementen worden gebruikt. Dus als u een stijl toepast met een klassekiezer, is elk element dat die klasse deelt onderhevig aan de stijlen die u definieert.
Klassekiezers worden gedefinieerd met een punt, gevolgd door de waarde van de klasse waarnaar u een set stijlen wilt toepassen. Hier is een voorbeeld van de klassenkiezer in actie:
.  .orangeBackground {achtergrondkleur: oranje; }

 Deze stijl stelt de achtergrondkleur van onze 
tag in op oranje. De stijl definieert ook de achtergrondkleur van onze oranje -tag, kunnen we dat doen met deze code:

 In deze code worden alle stijlregels die zijn gedefinieerd voor de klassen orangeBackground en grote toegepast op ons webelement. Met een ID-kaart konden we dit gedrag echter niet reproduceren, omdat elk item maar één ID kan hebben.
  ID`s hebben een unieke browserfunctie  
Tot nu toe hebben we besproken dat ID`s stijlen kunnen toepassen op een enkel element. In tegenstelling tot klassen die stijlen op meerdere elementen kunnen toepassen. Dit is niet het enige verschil tussen klasse- en ID-kiezers.
In de browser hebben klassen geen speciale functie. Hun belangrijkste doel is om u in staat te stellen stijlen toe te passen op een aantal elementen op een webpagina. ID daarentegen kan door de browser worden gebruikt om toegang te krijgen tot een bepaald deel van de webpagina.
Als u een ID aan een element toewijst, kunt u een speciale URL gebruiken om daar rechtstreeks naar te linken element. Dit gedrag werkt omdat ID`s uniek zijn op een webpagina.
Stel dat we een link naar onze website willen sturen die automatisch naar de gebruiker scrolt met een koptekst. We zouden het met deze code kunnen doen:
 In deze code hebben we een identiteitskaart toegewezen aan de tag 
 tag die de tekst Three bevat. Nu kunnen we een gebruiker een direct scrollende link naar dat element op de webpagina sturen. Dit wordt gedaan met het volgende adres:

Shop

Javascript Stijl toevoegen aan element

en ID-selectors

`CSS-selectors`

de id-selector is uniek

De klassenkiezer is niet uniek

ID`s hebben een unieke browserfunctie

tag die de tekst `Three` bevat. Nu kunnen we een gebruiker een direct scrollende link naar dat element op de webpagina sturen. Dit wordt gedaan met het volgende adres:

ID`s worden gebruikt door JavaScript

Je kunt beide klassen gebruiken selectors ID en CSS

Conclusie

News

Wiki