Wie kann ich bestimmte Textzeilen mithilfe von JavaScript und CSS selektiv formatieren?

Auswählen und Gestalten bestimmter Textzeilen mit CSS und JavaScript

Problem:

Wie können Sie a gezielt ansprechen und stilisieren? bestimmte Textzeile in einem Dokument? Mit dem CSS-Pseudoelement :first-line können Sie auf die erste Zeile abzielen. Gibt es jedoch eine Möglichkeit, eine beliebige Zeile auszuwählen?

JavaScript-Lösung:

Seit CSS Da dies allein nicht möglich ist, ist eine JavaScript-Lösung erforderlich. Betrachten Sie den folgenden Ansatz:

$(function() {
  var p = $('p');
  var words = p.text().split(' '), text = '', line = 0;
  $.each(words, function(i, w) {
    if ($.trim(w)) text += '<span>' + w + '</span> ';
  });
  p.html(text);
  $(window).resize(() => {
    var prevTop = -15;
    $('span', p).each(function() {
      var top = $(this).offset().top;
      if (top !== prevTop) { prevTop = top; line++; }
      $(this).attr('class', 'line' + line);
    });
  });
  $(window).resize();
});

Erklärung:

Diese Lösung umhüllt jedes Wort dynamisch in ein Span-Element und weist jedem Span basierend auf seinem Wort eine Zeilenklasse zu Position. Wenn die Fenstergröße geändert wird, passt das Skript die Zeilenklassen an, um sicherzustellen, dass jede Zeile ordnungsgemäß identifiziert wird.

Verwendung:

1. Beziehen Sie die jQuery-Bibliothek ein.
2. Umschließen Sie Ihren Text in ein Absatzelement mit einer ID oder Klasse zur Auswahl.
3. Fügen Sie das bereitgestellte Skript zu Ihrem hinzu Seite.
4. Ändern Sie die Größe des Fensters, um die Linienklassen zu sehen, die auf jedes Span-Element angewendet werden.

Zusätzliche Hinweise:

• Passen Sie die Logik für die Auswahl bestimmter Zeilen an, z. B. die Auswahl nur gerader oder ungerader Zeilen.
• Berücksichtigen Sie mögliche Probleme mit Klassen, die die Wortgröße ändern oder Breite.
• Ein funktionierendes Beispiel finden Sie in der bereitgestellten JSBin-Demo.

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte Textzeilen mithilfe von JavaScript und CSS selektiv formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!