jquery - 単語内の代替文字の異なる色

Question

単語の代替文字に緑色 (またはその他の色) を付けたいと思います。

CSSを使用してこれを行うにはどうすればよいですか? Jqueryも私にとっては問題ありません

前もって感謝します

Answer 1

jQuery を使用できる場合は、次のコード スニペットを使用できます。

$( "span" ).each(function( index ) {
  var originalText = $( this ).text();
  var newText = "";
  for( var i = 0; i < originalText.length; i++)
  {
      if (i % 2 === 0)
        newText += "<span>" + originalText.charAt(i) + "</span>";  
      else
        newText += originalText.charAt(i);
  }
  $( this ).html(newText);
});

必要な文字を元のスパン内のスパンに置き換え、そのスパンをスタイルできます。

フィドル: http://jsfiddle.net/m6RTW/

Answer 2

CSS は要素全体にのみ適用できます。したがって、テキストを要素に分割する必要があります。これは、手動、JavaScript、または HTML 生成で行うことができます。

HTML を短くするには、次のようにします ( http://jsfiddle.net/9TY4J/を参照) 。

<SPAN class="fancyColors"><B>G</B>o<B>d</B> .... </SPAN>

そしてCSSを書きます：

.fancyColors
{
    color:red;
}
.fancyColors B
{
    color:green;
    font-weight:normal;
}