Javascript Css-Attribut Hinzufügen

| | | | | | | |

Mit CSS-Selektoren können Webentwickler Stile auf ein bestimmtes Element oder eine Gruppe von Elementen auf einer Webseite anwenden.

Wenn Sie mit Selektoren arbeiten, möchten Sie möglicherweise nur Elemente mit a . als Ziel verwenden besonderes Attribut. Hier kommt der CSS-Attributselektor ins Spiel. Der Attributselektor hilft Ihnen, bestimmte Stile nur auf Elemente mit einem bestimmten Attribut anzuwenden.

In diesem Tutorial wird erläutert, wie Sie den CSS-Attributselektor beim Styling verwenden Elemente. Am Ende dieses Tutorials sind Sie ein Experte in der Verwendung des Attributselektors zum Stylen von Elementen.

HTML-Attribute

In HTML werden Attribute zum Definieren verwendet zusätzliche Merkmale oder Eigenschaften eines Elements. Das Höhenattribut legt beispielsweise die Höhe eines Bildes fest und das Titelattribut legt den Titel eines Webelements fest.

Sie deklarieren Attribute mithilfe der Name/Wert-Paarstruktur. Dies bedeutet, dass in einer HTML-Datei ein Attribut wie folgt angezeigt wird:name="value‚". Um mehr uber Attribute in HTML zu erfahren, lesen Sie unseren Leitfaden zu HTML-Attributen.

CSS-Attributauswahl

Wenn Sie eine Site entwerfen, möchten Sie möglicherweise einen Stil auf Elemente anwenden, der darauf basiert, ob diese Elemente einen bestimmten Attributwert haben. Dazu verwenden Sie den CSS-Attributselektor.

Die zwei Schritte, die Sie bei der Verwendung des Attributselektors ausfuhren, sind:

  1. Attribut einschließen’ s Namen in eckigen Klammern.
  2. Geben Sie die Stile an, die Sie auf die Attribute mit diesem Namen anwenden möchten.

Lassen Sie uns einige Beispiele fur CSS untersuchen Attributauswahl in Aktion.

CSS [Attribute]

Die einfachste Form des Attributselektors ist: [Attribut]. Vereinfacht gesagt schließen Sie den Namen eines Attributs in eckige Klammern ein.

Angenommen, wir möchten die Schriftgröße jedes Elements mit einem Titelattribut auf 16px setzen. Wir können dies mit diesem Code tun:

Der Code in unserer CSS-Regel gilt nur fur Elemente mit einem title-Attribut. Die Schriftgröße jedes Elements mit einem angegebenen title-Attribut–unabhängig davon, welchen Wert dieses Attribut speichert–wird gemäß der obigen Regel auf 16px geändert.

Sie können Ihre Attributauswahl präzisieren, indem Sie einen oder beide der folgenden Punkte angeben:

Angenommen, Sie möchten um die Größe des gesamten Absatzkopfzeilentexts auf 16 px einzustellen. Verwenden Sie dazu diesen Code:

Der Buchstabe p am Anfang der Attributauswahl weist den Browser an, nur den Schriftstil anzuwenden auf

-Tags. Der Teil [title] des Selektors weist den Browser an, den Schriftstil nur auf

-Tags mit einem title . anzuwenden Attribut angegeben.

T Daher konvertiert der Browser nach dem Lesen dieses Codes die Schriftgröße aller Absatzuberschriften (p) in 16 px. Dieser Code wirkt sich nicht auf anderen Text auf der Seite aus.

Der Attributselektor [attribute="value‚"] erm√∂glicht es Programmierern, Stile nur auf Elemente anzuwenden, deren Attribut Werte entsprechen dem im Selektor angegebenen Wert.

Angenommen, wir möchten die Hintergrundfarbe aller Links zur Karriere Karma-Startseite auf Orange setzen. Dieser Stil sollte die Hintergrundfarbe des Elements a auf Orange setzen. Wir können diese Aktion mit dem folgenden CSS-Code ausfuhren:

Diese Regel wählt alle Elemente, deren href-Attribut gleich python.engineering ist. Dann wird die Hintergrundfarbe all dieser Elemente auf Orange gesetzt.

CSS [attribute~="value‚"]

Der[attribute~=&ldquo Mit dem ;value‚"]-Selektor k√∂nnen Sie Elemente mit Attributwerten ausw√§hlen, die ein bestimmtes Wort enthalten.

Angenommen, Sie möchten beispielsweise allen p< . einen Stil zuweisen /code> Elemente mit Titeln, die mit dem Wort blue ubereinstimmen. Fur diesen Stil sollte die Textfarbe dieser Elemente in Blau geändert werden.

Wir können die folgende Regel verwenden, um diese Aufgabe zu erfullen:

Diese Regel findet alle

Tags, die mit Titeln verknupft sind, die das Wort "blau‚" und legt die Textfarbe des Textes innerhalb dieser

Tags zu blau. Wenn also ein

Tag den Titel blaue Farbe oder blaue Farbe hat, wird dieser Stil angewendet. Diese Regel gilt jedoch nicht fur ein

Tag mit dem Titel blueColor, da das Wort blue nicht unabhängig im Attribut vorhanden ist.

Dies unterscheidet sich vom *= Selektor, der nicht nur ein bestimmtes Wort in einem Attribut, sondern auch einen bestimmten Wert in einem Attribut finden kann.

CSS [attribute|="value‚"]

Mit dem [attribute|="value‚"]-Selektor k√∂nnen Sie Elemente ausw√§hlen, deren Attribute mit einem angegebenen beginnen Wert (z. B. "top‚"). Dies schlie√üt Elemente mit Attributen ein, die mit dem angegebenen Wert beginnen und einen Bindestrich gefolgt von zus√§tzlichem Text enthalten (z. B. "top-style‚" und andere "top-‚"-Werte). Beachten Sie, dass der Code einen vertikalen Strich (|) nach dem Wort "class‚"

Angenommen, Sie möchten beispielsweise jedem < . einen 10px oberen Abstand zuweisen ;div>-Element mit einem Klassenattribut, das mit top beginnt, einschließlich derer, die gefolgt von anderen durch Bindestrich getrennten Werten. Sie können dies mit diesem Code tun:

Diese Regel wendet am oberen Rand jedes

Es ist wichtig zu beachten, dass der von Ihnen angegebene Wert entweder ein ganzes Wort allein oder ein Wort gefolgt von einem Bindestrich sein muss. Mit anderen Worten, unser obiger Stil wurde auf Element mit dem Klassennamen topstyle.

CSS [attribute^="value‚"]

Das [attribute^=&ldquo ;value‚"] Selektor wird verwendet, um Elemente auszuw√§hlen, deren Attributwert mit einem bestimmten Wert beginnt. Der von Ihnen angegebene Wert muss kein ganzes Wort sein, im Gegensatz zum Selektor [attribute|="value‚"], den wir zuvor besprochen haben.

Angenommen, wir möchten Wenden Sie auf jedes

Der Webbrowser des Benutzers wendet den von uns definierten Padding-Bottom-Stil auf alle

CSS [attribute$="value‚"]

Der Operator $=wird verwendet, um alle Elemente auszuwählen, deren Attributwerte mit einem bestimmten Wert enden. Beispiel: Angenommen, Sie möchten die Textfarbe aller Hyperlinks, deren href-Attributwerte auf .app enden, in Grau ändern. Dies können Sie mit diesem Code tun:

Dieser Selektor wird angewendet auf alle -Elemente auf Ihrer Webseite, deren href-Werte auf .app enden.

CSS [attribute*="value‚"]

Der*=-Operatorermöglicht Ihnen, alle Elemente auszuwählen, deren Attributwerte einen bestimmten Wert enthalten. Im Gegensatz zum ~=-Operator kann dieser Attributselektor einen bestimmten Wert in . finden eine Klasse, nicht nur ein einzelnes Wort.

Fo Angenommen, Sie möchten einen Abstand von 50 Pixeln um alle

Diese Regel setzt eine 50px-Auffullung um alle HTML-Elemente mit Klassenattributen, die den Begriff allPadding enthalten. Elemente mit den Klassennamen new allPadding, surround allPadding red, allPaddingblue und allPadding-true werden also alle diesem Stil unterliegen.

Schlussfolgerung

Der CSS-Attributselektor ermöglicht es Entwicklern, Elemente basierend auf ihren Attributwerten auszuwählen und bestimmte Stile auf diese Elemente anzuwenden.

In diesem Tutorial wurden anhand von Beispielen die Grundlagen von Attributselektoren und die Verwendung aller Arten von CSS-Attributselektoren erläutert. Jetzt können Sie die CSS-Attributauswahl wie ein Profi verwenden.


CSS ist eine der drei wichtigsten Fähigkeiten in der Webentwicklung. Laden Sie die
kostenlose Python.Engineering App . herunter heute, um mit einem erfahrenen Karrierecoach zu sprechen, der Sie zu den Fähigkeiten berät, die Sie fur den Einstieg in eine Karriere als Webentwickler benötigen.

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