1

在这个站点中，有很多标题（使用 H2），想要一半左边然后用一种颜色，一半右边然后用另一种颜色，用空格分隔，但我不能修改 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 是一系列没有空格的字符，我尝试使用替换方法：

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 回答