用javascript设置子字符串的样式

Question

嗨，我正在尝试用javascript设计子字符串的样式。这是我的代码：

function runtest(){
    document.getElementById("test1").innerHTML.substring(0,2).style.fontStyle="italic";
}

substring函数可以工作，但当我添加样式时，错误控制台会给我一个"未定义"的错误。我如何用javascript对这个子字符串进行样式设置？

Answer 1

两个选项：

1. innerHTML解决方案警告：这将删除您正在执行操作的元素中任何元素上的任何事件处理程序。我在这里主要提到它，以便指出：

   var elm = document.getElementById("test1");
   var html = elm.innerHTML;
   elm.innerHTML = '<span style="font-style: italic">' + html.substring(0, 2) + '</span>' + html.substring(2);
   

2. 使用CCD_ 2。在这里，我假设要包装在跨度中的文本是元素中的第一个文本节点。这不会扰乱元素上的事件处理程序：

   var elm = document.getElementById("test1");
   var node = elm.firstChild;
   var span = document.createElement('span');
   node.splitText(2);
   span.style.fontStyle = "italic";
   elm.insertBefore(span, node);
   span.appendChild(node);
   

   splitText在过去有一个文本节点的位置创建两个相邻的文本节点，分割点位于指定的偏移处。然后我们取第一个，并将其包裹在span中。

   实时示例|实时源