CSS dynamisch auf einzelne Zeichen anwenden?
Ich verwende JavaScript / jQuery, um ein Datumsfeld auf meiner Seite zu füllen. Ich möchte jedem einzelnen Charakter des generierten Datums CSS-Stile hinzufügen und mich fragen, ob es möglich ist und wie ich es machen könnte. Grundsätzlich möchte ich, dass das Endergebnis so aussieht:
Hier ist mein Code, der das Datum erzeugt:
HTML:
%Vor%JavaScript:
%Vor%Hier ist ein JSFiddle .
3 Antworten
Ich bin mir nicht sicher, ob OP nach einem Mittel fragt, um die Zeichen nur in ein eigenes, selbstenthaltendes Element aufzuteilen, oder auch für die CSS-Lösung, die den Screenshot approximiert. Meine Antwort ist beides - siehe Demo Geige hier: Ссылка
Um die Datumszeichenfolge aufzuteilen, müssen Sie sich auf JS verlassen, etwa wie folgt:
%Vor%Für das CSS ist es einfach eine clevere Verwendung der CSS3-flexbox-Spezifikation und Pseudo-Elemente:
%Vor% Es ist nicht möglich, CSS auf einzelne Zeichen, nur auf Elemente anzuwenden. Daher müssen Sie Ihre Charaktere einfach in Elemente aufteilen! Umschließen Sie jedes Zeichen in span , und Sie können CSS auf jedes dieser spans anwenden (die jeweils nur ein Zeichen enthalten).
So etwas ( vollständiges JSFiddle ):
%Vor%Sie müssen die Zeichenfolge selbst in Zeichen aufteilen:
deine Geige mit meiner Erweiterung
%Vor% Auf diese Weise können Sie jedem Charakter seinen individuellen class und Stil geben.
Tags und Links javascript html jquery css