Comment puis-je styliser sélectivement des lignes de texte spécifiques à l'aide de JavaScript et CSS ?

Sélection et style de lignes de texte spécifiques avec CSS et JavaScript

Problème :

Comment pouvez-vous cibler et styliser de manière sélective un ligne de texte spécifique dans un document ? Le pseudo-élément CSS :first-line permet de cibler la première ligne, mais existe-t-il un moyen de sélectionner n'importe quelle ligne ?

Solution JavaScript :

Depuis CSS seul ne peut pas y parvenir, une solution JavaScript est nécessaire. Considérez l'approche suivante :

$(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();
});

Explication :

Cette solution enveloppe dynamiquement chaque mot dans un élément span et attribue une classe de ligne à chaque span en fonction de son position. Lorsque la fenêtre est redimensionnée, le script ajuste les classes de lignes pour garantir que chaque ligne est correctement identifiée.

Comment utiliser :

1. Inclut la bibliothèque jQuery.
2. Enveloppez votre texte dans un élément de paragraphe avec un identifiant ou une classe pour la sélection.
3. Ajoutez le script fourni à votre page.
4. Redimensionnez la fenêtre pour voir les classes de lignes appliquées à chaque élément span.

Remarques supplémentaires :

• Ajustez la logique pour la sélection de lignes spécifiques, par exemple en sélectionnant uniquement les lignes paires ou impaires.
• Considérez les problèmes potentiels liés aux classes modifiant la taille des mots ou width.
• Consultez la démo JSBin fournie pour un exemple fonctionnel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!