JavaScript 如何像 CSS 的 `:first-line` 一樣為任意行設定特定文字行的樣式？

使用JavaScript 選擇特定文字行

我們如何設定特定文字行的樣式，類似於:first-line CSS 偽元素，而對 CSS 偽元素，而可能不將其限制為僅第一行？

雖然僅 CSS 不足以完成此任務，但 JavaScript 提供了解決方案。

JavaScript 實作：

我們可以使用JavaScript 將每個單字包裝在一個span 元素中：

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

為了確定每個span的行號，我們使用Window 的resize 事件來計算每個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 

突出顯示偶數/奇數行：

要突出顯示偶數/奇數行，程式碼可以簡化為：

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

注意事項:

此方法假設單字不會在同一行內換行，且類別中的變更可能會影響單字的大小或寬度。

範例：

[點擊此處](https://jsbin.com/piwizateni/1/edit?html,css,js,output) 進行工作演示。

以上是JavaScript 如何像 CSS 的 `:first-line` 一樣為任意行設定特定文字行的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！