Bagaimanakah Saya Boleh Menyasarkan dan Menggayakan Garisan Khusus Teks dalam CSS dan JavaScript?

Cara Menyasar dan Menggayakan Baris Teks Individu dalam CSS/JS

Memilih dan menggayakan baris teks tertentu mungkin kelihatan mudah dengan elemen pseudo baris pertama CSS , tetapi bagaimana jika anda perlu menyasarkan mana-mana baris dalam teks?

Walaupun CSS tulen tidak menawarkan satu cara untuk memilih baris sewenang-wenangnya, JavaScript boleh mengisi jurang.

Penyelesaian JavaScript

Satu pendekatan menggunakan JavaScript ialah membungkus setiap perkataan dalam elemen span dan menetapkan kelas unik berdasarkan span kedudukan dalam teks. Berikut ialah kodnya:

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

  $(window).resize(); //first one
});

Kod ini pada asasnya memecahkan teks kepada perkataan individu, membalutnya dalam rentang dengan kelas CSS dan memberikan nama kelas berdasarkan kedudukan baris span apabila tetingkap penyemak imbas diubah saiznya.

Aplikasi

Untuk menyerlahkan setiap baris genap perenggan, anda boleh mengubah suai kod:

$('span.even, span.odd').css({
  'background-color' : '#ccc'
});

Kaveat

Adalah penting untuk ambil perhatian bahawa kes tepi, seperti perubahan nama kelas yang mempengaruhi saiz atau lebar perkataan, mungkin memberi kesan kepada ketepatan skrip.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyasarkan dan Menggayakan Garisan Khusus Teks dalam CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!