Javascript Stil Zum Element Hinzufügen

| | | | | | |

Beim Vergleich der CSS-Klasse mit der ID besteht der Unterschied darin, dass die CSS-Klasse einen Stil auf mehrere Elemente anwendet. ID hingegen wendet einen Stil auf ein eindeutiges Element an. ID ist auch insofern besonders, als Sie eine spezielle URL verwenden können, um direkt auf ein Element zu verlinken, und es wird von JavaScript verwendet.

In CSS werden Selektoren verwendet, um auf ein bestimmtes Element oder einen Bereich von Elementen auf einer Webseite abzuzielen. Nachdem ein Element gezielt ausgerichtet wurde, kann ein Stil oder eine Gruppe von Stilen auf das Element angewendet werden.

Es steht eine breite Palette von Selektoren zur Verfugung. Zwei der am häufigsten verwendeten sind class und ID. Beide werden verwendet, um auf Elemente abzuzielen, auf die ein Stil angewendet werden soll.

CSS-Klasse vs. ID-Selektoren

Was ist der Unterschied zwischen der Klasse und ID-Selektoren? Diese Frage stellen sich viele CSS-Neulinge, die wir in diesem Handbuch beantworten werden.

Am Ende dieses Handbuchs werden Sie die Unterschiede kennen. diese beiden Selektoren. Sie verfugen uber die Informationen, die Sie benötigen, um eine fundierte Entscheidung daruber zu treffen, welcher Selektor in Ihrem Code verwendet werden soll. Lass uns beginnen.

CSS-Selektoren

Beim Entwerfen einer Webseite möchten Sie, dass bestimmte Stile auf bestimmte Elemente auf der Seite angewendet werden. Sie können beispielsweise die Textfarbe aller

Tags auf grun setzen oder die Schriftgröße einer Kopfzeile ändern.

Selektoren ermöglichen es Ihnen, auf bestimmte Elemente auf einer Webseite abzuzielen, auf die Sie Stile anwenden können. In CSS stehen viele Selektoren zur Verfugung, z. B. universelle Selektoren, Nachkommenselektoren, untergeordnete Selektoren und Gruppierungsselektoren. Wenn Sie mehr uber CSS-Selektoren erfahren möchten, lesen Sie unseren Anfängerleitfaden zu CSS-Selektoren.

Zwei Selektoren, class und id, werden verwendet, um Stile auf Elemente basierend auf der einem HTML-Element zugewiesenen Klasse bzw. ID anzuwenden. Diese Selektoren sind jedoch oft verwirrt, also lassen Sie uns untersuchen, wie jeder einzelne funktioniert.

Der ID-Selektor ist eindeutig

Mit dem ID-Selektor können Sie Stilregeln definieren, die fur ein einzelnes Element auf der Webseite gelten. Jede Webseite kann nur ein Element mit einem einzelnen ID-Attribut haben. Dies bedeutet, dass der ID-Selektor niemals zum Stylen von mehr als einem Element verwendet werden kann.

ID-Selektoren werden mit einem Hash-Zeichen definiert. Unmittelbar danach folgt der ID-Wert, auf den Sie einen Satz von Stilregeln anwenden möchten. Hier ist ein Beispiel fur den ID-Selektor in Aktion:

Dieser Stil gilt fur die

-Element in unserem HTML-Dokument mit der ID betaBanner. Der Stil setzt die Hintergrundfarbe des Elements auf Orange und die Farbe des Textes im Element auf Weiß.

Der Klassenselektor ist nicht eindeutig

Mit einem Klassenselektor können Sie Stilregeln definieren, die fur jedes Element gelten, dessen Klassenattribut einem bestimmten Wert entspricht.

Wie bereits erwähnt, kann der ID-Selektor nur zum Stylen eines Elements verwendet werden. Dies liegt daran, dass IDs nur einmal auf einer Webseite verwendet werden können. Klassen hingegen können uber mehrere Elemente hinweg verwendet werden. Wenn Sie also einen Stil mit einem Klassenselektor anwenden, unterliegt jedes Element, das diese Klasse teilt, den von Ihnen definierten Stilen.

Klassenselektoren werden mit einem Punkt definiert, gefolgt vom Wert der Klasse, auf die Sie einen Satz von Stilen anwenden möchten. Hier ein Beispiel fur den Klassenselektor in Aktion:

.orangeBackground { Hintergrundfarbe: orange; }

Dieser Stil legt die Hintergrundfarbe unserer

zu orange markieren. Außerdem legt der Stil die Hintergrundfarbe unserer -Tag könnten wir dies mit diesem Code tun:

In diesem Code alle Stilregeln, die fur orangeBackground defined definiert sind und große-Klassen werden auf unser Webelement angewendet. Mit einer ID hingegen konnten wir dieses Verhalten nicht replizieren, da jedes Element nur eine ID haben kann.

IDs haben eine eindeutige Browserfunktion

Bisher haben wir besprochen die Tatsache, dass IDs Stile nur auf ein Element anwenden können. Im Gegensatz zu Klassen, die Stile auf mehrere Elemente anwenden können. Dies ist nicht der einzige Unterschied zwischen den Klassen- und ID-Selektoren.

Klassen haben im Browser keine spezielle Funktion. Ihr Hauptzweck besteht darin, Ihnen zu ermöglichen, Stile auf eine Reihe von Elementen auf einer Webseite anzuwenden. IDs hingegen können vom Browser verwendet werden, um zu einem bestimmten Teil der Webseite zu navigieren.

Wenn Sie einem Element eine ID zuweisen, können Sie eine spezielle URL verwenden, um direkt auf dieses Element zu verlinken. Dieses Verhalten funktioniert, weil IDs auf einer Webseite eindeutig sind.

Angenommen, wir möchten einen Link zu unserer Website senden, der den Benutzer automatisch zu einem Header scrollt. Wir könnten dies mit diesem Code tun:

In diesem Code haben wir dem

-Tag, das den Text Abschnitt Drei enthält. Jetzt könnten wir einem Benutzer einen direkten Link senden, der ihn zu diesem Element auf der Webseite scrollt. Dies erfolgt uber die folgende URL:

< /div>

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

Wenn ein Nutzer zu dieser URL navigiert (wobei domain.com die URL von Ihrer Website), scrollen sie zur √úberschrift mit der ID section3. Dieses Verhalten gilt nicht fur Klassen.

IDs werden von JavaScript verwendet

Wenn Sie Wenn Sie Erfahrung mit JavaScript haben, wissen Sie, dass in dieser Programmiersprache häufig IDs verwendet werden. Die Funktion getElementById ermöglicht es Ihnen, ein Element auf einer Webseite auszuwählen . Es beruht auf der Tatsache, dass nur ein Element dieselbe ID haben kann.

Klassen können andererseits mehrere Elemente auf einer Webseite widerspiegeln. Sie wären nicht nutzlich, wenn Sie damit arbeiten möchten ein bestimmtes Element in JavaSc zerreißen.

Sie können Verwenden Sie sowohl ID- als auch CSS-Klassenselektoren

Es gibt keine Regeln in HTML, die Sie daran hindern, einem Element sowohl eine ID als auch ein a . zuzuweisen -Klasse.

Angenommen, Sie möchten die Stile, die einer Klasse namens backgroundOrange zugeordnet sind, auf ein anwenden. Sie können dies mit diesem Code tun:

Dieser

-Tag unterliegt den Stilen fur die Klasse backgroundOrange. Daruber hinaus werden die Stile verwendet, die mit einem ID-Selektor auf die customDiv ID angewendet wurden.

Schlussfolgerung

Wenn Sie mit CSS arbeiten, gibt es keine besonderen Grunde, die Sie dazu zwingen, eine ID zu verwenden eine Klasse. Es empfiehlt sich jedoch, IDs nur zu verwenden, wenn ein Stil auf ein Element auf der Webseite angewendet werden soll, und Klassen zu verwenden, wenn ein Stil auf mehrere Elemente angewendet werden soll.

In diesem Tutorial , haben wir anhand von Beispielen die Grundlagen der CSS-ID und der Klassenselektoren besprochen und die beiden verglichen und gegenubergestellt. Jetzt können Sie die CSS-ID und die Klassenauswahl wie ein erfahrener Entwickler verwenden!

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