Javascript Aggiunge Stile All’Elemento

| | | | | | |

Quando si confronta la classe CSS con l’ID, la differenza è che la classe CSS applica uno stile a più elementi. ID, d’altra parte, applica uno stile a un elemento univoco. L’ID è anche speciale in quanto puoi utilizzare un URL speciale per collegarti direttamente a un elemento ed è utilizzato da JavaScript.

In CSS, i selettori vengono utilizzati per scegliere come target un elemento specifico o un intervallo di elementi in una pagina web. Una volta che un elemento è stato scelto come target, è possibile applicare uno stile o un insieme di stili all’elemento.

è disponibile un’ampia gamma di selettori. Due dei più comunemente usati sono class e ID. Entrambi vengono utilizzati per indirizzare gli elementi a cui deve essere applicato uno stile.

Classe CSS e selettori ID

Qual ‚Äã‚Äãè la differenza tra la classe e Selettori ID? Questa è una domanda posta da molti sviluppatori che non conoscono i CSS ea cui risponderemo in questa guida.

Alla fine della lettura di questa guida, conoscerai le differenze tra questi due selettori. Avrai le informazioni necessarie per prendere una decisione informata su quale selettore utilizzare nel tuo codice. Cominciamo.

Selettori CSS

Quando si progetta una pagina web, vorrai applicare determinati stili a elementi specifici della pagina. Ad esempio, potresti voler impostare il colore del testo di tutti i

i tag in verde o modificare la dimensione del carattere di un’intestazione.

I selettori ti consentono di scegliere come target elementi specifici su una pagina web a cui puoi applicare stili. In CSS sono disponibili molti selettori, come selettori universali, selettori discendenti, selettori figlio e selettori di raggruppamento. Se sei interessato a saperne di più sui selettori CSS, leggi la nostra guida per principianti ai selettori CSS.

Due selettori, class e id, vengono utilizzati per applicare stili agli elementi in base rispettivamente alla classe e all’ID assegnati a un elemento HTML, ma questi selettori sono spesso confusi, quindi esploriamo come funzionano ciascuno di essi.

Il selettore ID è univoco

Il selettore id ti permette di definire regole di stile che si applicano a un singolo elemento nella pagina web. Ogni pagina web può avere un solo elemento con un singolo attributo ID. Ciò significa che il selettore ID non può mai essere utilizzato per applicare lo stile a più di un elemento.

I selettori di ID sono definiti utilizzando un cancelletto. Sono immediatamente seguiti dal valore ID a cui si desidera applicare un insieme di regole di stile. Ecco un esempio del selettore ID in azione:

Questo stile si applica al

elemento nel nostro documento HTML con l’ID betaBanner. Lo stile imposterà il colore di sfondo dell’elemento su arancione e il colore del testo nell’elemento su bianco.

Il selettore di classe non è univoco

Un selettore di classe ti consente di definire regole di stile che si applicano a qualsiasi elemento con un attributo di classe uguale a un certo valore.

Come discusso in precedenza, il selettore ID può essere utilizzato solo per definire lo stile di un elemento. Questo perché gli ID possono essere utilizzati solo una volta in una pagina web. Le classi, d’altra parte, possono essere utilizzate su più elementi. Quindi, se applichi uno stile usando un selettore di classe, qualsiasi elemento che condivide quella classe sarà soggetto agli stili che definisci.

I selettori di classe vengono definiti utilizzando un punto, seguito dal valore della classe a cui si desidera applicare un insieme di stili. Ecco un esempio del selettore di classe in azione:

.orangeBackground { background-color: arancione; }

Questo stile imposta il colore di sfondo del nostro

tag per arancione. Inoltre, lo stile imposta il colore di sfondo del nostro tag, potremmo farlo utilizzando questo codice:

In questo codice, tutte le regole di stile definite per orangeBackground e le classi large vengono applicate al nostro elemento web. Con un ID, invece, non potremmo replicare questo comportamento, perché ogni elemento può avere un solo ID.

Gli ID hanno una funzione browser univoca

Finora abbiamo discusso il fatto che gli ID possono applicare gli stili solo a un elemento. A differenza delle classi che possono applicare stili a più elementi. Questa non è l’unica differenza tra i selettori di classe e ID.

Nel browser, le classi non hanno una funzione speciale. Il loro scopo principale è consentire di applicare stili a una serie di elementi in una pagina web. Gli ID, invece, possono essere utilizzati dal browser per navigare in una determinata parte della pagina web.

Se assegni un ID a un elemento, puoi utilizzare un URL speciale per collegarti direttamente a quell’elemento. Questo comportamento funziona perché gli ID sono univoci in una pagina web.

Supponiamo di voler inviare un collegamento al nostro sito Web che fa scorrere automaticamente l’utente su un’intestazione. Potremmo farlo usando questo codice:

In questo codice abbiamo assegnato un ID al

tag che contiene il testo Sezione Tre. Ora, potremmo inviare a un utente un collegamento diretto che lo scorra a quell’elemento nella pagina web. Questo viene fatto utilizzando il seguente URL:

< /div>

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

Quando un utente accede a questo URL, (dove domain.com è l’URL di tuo sito web), scorreranno fino all’intestazione con l’ID section3. Questo comportamento non si applica alle classi.

Gli ID vengono utilizzati da JavaScript

Se hai qualsiasi esperienza con JavaScript, saprai che gli ID sono comunemente usati in quel linguaggio di programmazione. La funzione getElementById ti consente di selezionare un elemento in una pagina web . Si basa sul fatto che un solo elemento può condividere lo stesso ID.

Le classi, d’altra parte, possono riflettere più elementi su una pagina Web. Non sarebbero utili se si desidera lavorare con un particolare elemento in JavaSc strappare.

Puoi Usa entrambi i selettori di classe ID e CSS

Non ci sono regole in HTML che ti impediscono di assegnare a un elemento sia un ID che un class.

Supponiamo di voler applicare gli stili associati a una classe chiamata backgroundOrange a un . Puoi farlo usando questo codice:

Questo

tag sarà soggetto agli stili per la classe backgroundOrange. Inoltre, utilizzerà anche gli stili applicati all’ID customDiv utilizzando un selettore ID.

Conclusione

Quando lavori con i CSS, non ci sono motivi specifici che ti costringano a utilizzare un ID su una classe. Tuttavia, è buona norma utilizzare gli ID solo se si desidera applicare uno stile a un elemento della pagina Web e utilizzare le classi se si desidera applicare uno stile a più elementi.

In questo tutorial , abbiamo discusso, con riferimento agli esempi, le basi dell’ID CSS e dei selettori di classe, e abbiamo confrontato e contrapposto i due. Ora sei pronto per iniziare a utilizzare l’ID CSS e i selettori di classe come uno sviluppatore esperto!

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

News


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