Javascript Stijl toevoegen aan element

| | | | | | |

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!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method