Es gibt kein CSS, um nur einzelne Wörter in einem Element mit mehreren Wörtern zu unterstreichen (text-decoration: underline;). Der beste Weg wäre, jedes Wort (nicht die Leerzeichen, nur die Wörter) in Spans zu verpacken und diese Spans zu unterstreichen. Hier ist jQuery, um das für h1-Elemente zu tun.
$('h1').each(function() {
var words = $(this).text().split(' ');
$(this).empty().html(function() {
for (i = 0; i < words.length; i++) {
if (i == 0) {
$(this).append('<span>' + words[i] + '</span>');
} else {
$(this).append(' <span>' + words[i] + '</span>');
}
}
});
});Dann könnten Sie tun
h1 span {
text-decoration: underline;
}Ähnliche und etwas robustere Lösung: Lettering.js
Für die reine JS-Version
Ich glaube, ich habe den Umfang auch etwas reduziert. Obwohl Ihre Version viel abstrakter ist und besser wartbaren Code verwendet.
Wow, sorry :P Es sollte ein Leerzeichen zwischen </span> und <span> sein
Nur eine Anmerkung: Wenn Sie eine for-Schleife verwenden, sollten Sie die Variable i mit dem Schlüsselwort var deklarieren. Siehe hier, warum.
Des Weiteren, wenn diese for-Schleife eine Länge von 0 feststellt, wird sie niemals in den Körper der for-Schleife gelangen und bricht ab, bevor der Code darin initialisiert wird. Daher wird Ihre if-else-Anweisung komplett ignoriert, da nur der else-Fall wahr sein kann. If wird niemals erreicht, da die for-Schleife vorher abbricht.
Der Code in der Referenz ist korrekt, aber diesem Code auf dieser Seite fehlen die Span-Tags innerhalb von append().
mein Fehler, das ist behoben.
Obwohl die reine JS-Version auch nicht schlecht ist. Es gibt auch Performance-Gewinne in der jQuery-Version. Warum $.fn.each, $.fn.empty, $.fn.html und dann ein Dutzend Mal $.fn.append aufrufen?
* das empty() ist einfach redundant
* die append()-Aufrufe ergeben innerhalb von html keinen Sinn. Entweder außerhalb aufbauen und ein paar Mal $(this).append() aufrufen, oder es intern aufbauen und $(this).html( stuff ); aufrufen. Letzteres wird empfohlen.
* Sie verwenden text(), um den Wert abzurufen, aber html()/append(), um ihn zurückzugeben. Dies ist sehr gefährlich bei der Arbeit mit Benutzereingaben und kann auch Ihr Layout zerstören, wenn Titel HTML enthalten. Sie müssen hier HTML escapen, wenn Sie die Strings erstellen (oder $.fn.text verwenden).
* Vergessen Sie nicht 'var' statt i in der for-Schleife. Oder verschieben Sie es in die Liste der Variablen außerhalb der for-Schleife, dann sparen Sie ein paar Bits, indem Sie nicht zwei Var-Anweisungen starten (das sind alles eine Var-Anweisung, nicht wie sie durch ein Komma getrennt sind).
wie lege ich eine kleine Unterstreichung in HTML CSS?
Obwohl die reine JS-Version auch nicht schlecht ist. Es gibt auch Performance-Gewinne in der jQuery-Version. Warum $.fn.each, $.fn.empty, $.fn.html und dann ein Dutzend Mal $.fn.append aufrufen?
* das empty() ist einfach redundant
* die append()-Aufrufe ergeben innerhalb von html keinen Sinn. Entweder außerhalb aufbauen und ein paar Mal $(this).append() aufrufen, oder es intern aufbauen und $(this).html( stuff ); aufrufen. Letzteres wird empfohlen.
* Sie verwenden text(), um den Wert abzurufen, aber html()/append(), um ihn zurückzugeben. Dies ist sehr gefährlich bei der Arbeit mit Benutzereingaben und kann auch Ihr Layout zerstören, wenn Titel HTML enthalten. Sie müssen hier HTML escapen, wenn Sie die Strings erstellen (oder $.fn.text verwenden).
* Vergessen Sie nicht 'var' statt i in der for-Schleife. Oder verschieben Sie es in die Liste der Variablen außerhalb der for-Schleife, dann sparen Sie ein paar Bits, indem Sie nicht zwei Var-Anweisungen starten (das sind alles eine Var-Anweisung, nicht wie sie durch ein Komma getrennt sind).
Chris, sag mir bitte, wie ich nicht nur h1, sondern auch h2 in das Skript einfügen kann.
Vielen Dank im Voraus, Ecatherina.
danke
Ich brauche etwas CSS-Code, bitte oga
Das CSS ist in der Referenz-URL.
Dein Tutor ist sehr nett, Leute...
mag es..
Schönes Spiel! Was uns wirklich stört, ist eine einzelne Online-Verbindung zum Spielen im Solo-Modus. Ich meine ernsthaft, wtf?
meine Version akzeptiert nicht-endgültige Knoten!
gist
https://gist.github.com/yukulele/8668962
pen
http://codepen.io/yukulele/pen/zrefF
Gibt es eine Möglichkeit, dies mit einer Wenn-Dann-Anweisung zu tun? z.B. das erste Wort rot ändern, NUR wenn es mehr als 1 Wort gibt? Ich möchte, dass der Span 'word1' nur dann rot ist, wenn mehrere Wörter im Titel vorhanden sind, die restlichen Wörter wären schwarz. Andernfalls wäre word1 schwarz.