어떻게 JavaScript가 CSS의 `:first-line`처럼 특정 텍스트 줄의 스타일을 지정할 수 있지만 모든 줄에 적용할 수 있나요?

JavaScript로 특정 텍스트 줄 선택

:first-line CSS 의사 요소와 유사하게 특정 텍스트 줄의 스타일을 지정하는 방법 , 첫 번째 줄에만 국한하지 않고요?

CSS만으로는 이 작업에 충분하지 않지만 JavaScript는 솔루션을 제공합니다.

JavaScript 구현:

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

각 범위의 줄 번호를 결정하기 위해 Window의 크기 조정 이벤트를 사용하여 각 범위의 수직 위치를 계산합니다.

  $(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!