ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript は、CSS の `:first-line` のように、テキストの特定の行を任意の行にスタイル設定するにはどうすればよいでしょうか?

JavaScript は、CSS の `:first-line` のように、テキストの特定の行を任意の行にスタイル設定するにはどうすればよいでしょうか?

Barbara Streisand
リリース: 2024-11-18 21:48:02
オリジナル
282 人が閲覧しました

How Can JavaScript Style Specific Lines of Text Like CSS's `:first-line` but for Any Line?

JavaScript を使用した特定のテキスト行の選択

:first-line 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); 
ログイン後にコピー

行を決定するには各スパンの数値を計算するには、ウィンドウのサイズ変更イベントを使用して各スパンの垂直位置を計算します。スパン:

  $(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 
ログイン後にコピー

偶数/奇数行の強調表示:

偶数/奇数行を強調表示する場合、コードを簡略化できます。 to:

  $(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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート