Bagaimanakah Saya Boleh Menggayakan Baris Teks Khusus Secara Selektif Menggunakan JavaScript dan CSS?

Memilih dan Menggayakan Garis Teks Khusus dengan CSS dan JavaScript

Masalah:

Bagaimana anda boleh menyasarkan dan menggayakan secara selektif baris teks tertentu dalam dokumen? Elemen pseudo CSS :first-line membenarkan anda menyasarkan baris pertama, tetapi adakah terdapat cara untuk memilih mana-mana baris?

Penyelesaian JavaScript:

Sejak CSS sahaja tidak boleh mencapai ini, penyelesaian JavaScript diperlukan. Pertimbangkan pendekatan berikut:

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

Penjelasan:

Penyelesaian ini secara dinamik membalut setiap perkataan dalam elemen span dan menetapkan kelas baris kepada setiap span berdasarkan kedudukan. Apabila tetingkap diubah saiz, skrip melaraskan kelas baris untuk memastikan setiap baris dikenal pasti dengan sewajarnya.

Cara Menggunakan:

1. Sertakan pustaka jQuery.
2. Balut teks anda dalam elemen perenggan dengan ID atau kelas untuk pemilihan.
3. Tambahkan skrip yang disediakan pada halaman anda.
4. Ubah saiz tetingkap untuk melihat kelas baris digunakan pada setiap elemen span.

Tambahan Nota:

• Laraskan logik untuk pemilihan baris tertentu, seperti memilih genap atau baris ganjil.
• Pertimbangkan potensi isu dengan kelas mengubah saiz atau lebar perkataan.
• Semak demo JSBin yang disediakan untuk contoh yang berkesan.

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