Bagaimanakah Gaya JavaScript Boleh Menggayakan Baris Teks Khusus Seperti `:baris pertama` CSS tetapi untuk Mana-mana Baris?

Memilih Baris Teks Tertentu dengan JavaScript

Bagaimanakah kita boleh menggayakan baris teks tertentu, serupa dengan unsur pseudo CSS :first-line , tanpa mengehadkannya kepada baris pertama sahaja?

Walaupun CSS sahaja tidak mencukupi untuk tugasan ini, JavaScript menawarkan penyelesaian.

Pelaksanaan JavaScript:

Kami boleh membungkus setiap perkataan dalam elemen span menggunakan 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); 

Untuk menentukan nombor baris bagi setiap span, kami menggunakan acara ubah saiz Tetingkap untuk mengira kedudukan menegak setiap 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 

Menyerlahkan Baris Genap/Ganjil:

Untuk menyerlahkan baris genap/ganjil, kod boleh dipermudahkan kepada:

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

Pertimbangan :

Kaedah ini mengandaikan bahawa perkataan tidak dibalut dalam baris yang sama dan perubahan dalam kelas boleh menjejaskan saiz atau lebar perkataan.

Contoh:

[Klik di sini](https://jsbin.com/piwizateni/1/edit?html,css,js,output) untuk demonstrasi yang berfungsi.

Atas ialah kandungan terperinci Bagaimanakah Gaya JavaScript Boleh Menggayakan Baris Teks Khusus Seperti `:baris pertama` CSS tetapi untuk Mana-mana Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!