Change language
Python.Engineering Wiki Javascript Stijl toevoegen aan element

Javascript Stijl toevoegen aan element

__main__ Python module | code Python module | COM PHP module | dis Python module | DOM PHP module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | iat | io Python module | JavaScript | nis Python module | os Python module | PS PHP module | Python functions | re Python module | select Python module | selectors Python module | site Python module | StackOverflow | time Python module | UI PHP module
Michael Zippo 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:

https: //domain .com/index.html#section3

Wanneer een gebruiker toegang krijgt tot deze URL (waar domain.com de URL van uw site is), scrollen ze naar de koptekst met de id < em>section3 . Dit gedrag heeft geen invloed op klassen.

ID`s worden gebruikt door JavaScript

Als je ervaring hebt met JavaScript weet u dat ID`s vaak worden gebruikt in deze programmeertaal. Met de functie getElementById kunt u een element op een webpagina selecteren. Het is gebaseerd op het feit dat slechts één item kan worden gedeeld. dezelfde ID hebben.

Klassen daarentegen kunnen meerdere elementen op een webpagina weergeven. Ze zouden niet handig zijn als je met een bepaald element in JavaSc wilt werken om te rippen.

Je kunt beide klassen gebruiken selectors ID en CSS

Er zijn geen regels in HTML die voorkomen dat u beide een ID toewijst aan een element van een klasse.

Stel dat we de stijlen die zijn gekoppeld aan een klasse met de naam backgroundOrange willen toepassen op het label -tag. Je kunt het doen met deze code:

tag zal onderhevig zijn aan stijlen voor de backgroundOrange. Daarnaast zal het ook stijlen gebruiken die zijn toegepast op ID customDiv met behulp van een identiteitskiezer.

Conclusie

Als je met CSS werkt, is er geen specifieke reden om een ID-kaart in een klas te gebruiken. Het is echter een goed idee om ID alleen te gebruiken als u de stijl van één webpagina-element wilt, en om te gebruiken als u de stijl van meerdere elementen wilt.

In deze zelfstudie die we hebben besproken, verwijzend naar de voorbeelden, de basisprincipes van CSS-ID`s en klassenkiezers, en we hebben ze vergeleken en beide. U bent nu klaar om CSS-ID`s en klassenkiezers te gaan gebruiken als een ervaren ontwikkelaar!