1

このサイトにはたくさんのタイトルがあり（H2を使用）、半分左に1つの色、半分右に別の色をスペースで区切って欲しいのですが、phpファイルを変更できません（CMSであるため）それから、私はいくつかのJavascriptでそれをやろうとしていました：

var headh2 = document.getElementsByName('head2');
    switch (headh2.innerHTML) {
        case ('first item'):
            headh2.innerHTML = '<span style="color: #022662">first </span> item';
        break;
        case ('second item'):
            headh2.innerHTML = '<span style="color: #022662">second </span> item';
        break;
        default:
            headh2.innerHTML = headh2.innerHTML;
    }

しかし、それはどのような状況でも機能しません。指定する必要がありますが、次のようなことはできません。

    var headh2 = document.getElementsByName('head2');
    var X = [abc]; 
    switch (headh2.innerText) {
        case (X[0]+' '+X[1]):
            headh2.innerHTML = '<span style="color: #022662">'+X[0]+'</span>'+X[1];
        break;
        case (X[0]+' '+X[1]+' '+X[2]):
            headh2.innerHTML = '<span style="color: #022662">'+X[0]+'</span>'+X[1]+' '+X[2];
        break;
        default:
            headh2.innerHTML = X[0];
    }
}

Xがスペースのない文字の範囲である場合、replaceメソッドを使用しようとしました。

JS：

    var headh2 = document.getElementsByName('head2').innerHTML;
    var str = headh2; 
    var n=str.replace(" ","</span> <span class='color2'>");
    document.getElementsByName('head2').innerHTML=n;

PHP：

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><span name="head2" class="color1"><?php the_title(); ?></span></a></h2>

しかし、それは正しく機能しません。私が望むものだけでなく、タイトルのすべてのスペースを置き換えます。

よろしくお願いします。

4

1 に答える 1

1

これがDOM操作でそれを行う方法です。これは、すべてのh2タグ に対して行うように少し変更されていることに注意してください。ライブビュー

var nodes = document.getElementsByTagName('h2');
for(var i = 0; i < nodes.length; i++)
{
  var second = nodes[i].firstChild;
  var parts = second.nodeValue.split(" ", 2);

  var first = document.createElement('span');
  first.appendChild(document.createTextNode(parts[0]));
  first.style.color = "#022662";
  nodes[i].insertBefore(first, second);
  if(parts.length > 1)
    second.nodeValue = " " + parts[1];
  else
    second.nodeValue = "";
}
于 2012-06-06T20:19:01.407 に答える