javascript - 在 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. 使用 splitText .在这里，我假设您要在跨度中换行的文本是元素中的第一个 文本节点。这不会弄乱元素上的事件处理程序:

   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 中。

   Live Example | Live Source