Comment JavaScript peut-il styliser des lignes de texte spécifiques comme « :first-line » de CSS mais pour n'importe quelle ligne ?

Sélection de lignes de texte spécifiques avec JavaScript

Comment pouvons-nous styliser des lignes de texte spécifiques, similaires au pseudo-élément CSS :first-line , sans le limiter à la première ligne ?

Bien que CSS seul soit insuffisant pour cette tâche, JavaScript offre une solution.

Implémentation de JavaScript :

Nous pouvons envelopper chaque mot dans un élément span en utilisant JavaScript :

$(function(){ 
  var p = $('p'); 
  var words = p.text().split(' '); 
  var text = ''; 
  $.each(words, function(i, w){
                   if($.trim(w)) text = text + '<span>' + w + '</span> ' }
        ); //each word 
  p.html(text); 

Pour déterminer le numéro de ligne de chaque span, nous utilisons l'événement resize de Window pour calculer la position verticale de chaque span :

  $(window).resize(function(){ 

    var line = 0; 
    var prevTop = -15; 
    $('span', p).each(function(){ 
      var word = $(this); 
      var top = word.offset().top; 
      if(top!=prevTop){ 
        prevTop=top; 
        line++; 
      } 
      word.attr('class', 'line' + line); 
    });//each 

  });//resize 

Mise en surbrillance des lignes paires/impaires :

Pour mettre en évidence les lignes paires/impaires, le code peut être simplifié en :

  $(window).resize(function(){ 

    $('span', p).each(function(){ 
      var word = $(this); 
      var top = word.offset().top; 
      var line = Math.floor(top / 20);
      word.attr('class', (line % 2 == 0 ? 'even' : 'odd'));
    });//each
  });//resize 

Considérations :

Cette méthode suppose que les mots ne sont pas enroulés dans la même ligne et que les changements dans la classe peuvent affecter la taille ou la largeur des mots.

Exemple :

[Cliquez ici](https://jsbin.com/piwizateni/1/edit?html,css,js,output) pour une démonstration fonctionnelle.

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!