javascript - 在 javascript 中设置子字符串样式

Question

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

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

子字符串函数有效，但是当我添加样式时，错误控制台给了我一个“未定义”的错误。如何使用 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. 在这里，我假设您要在 span 中包装的文本是元素中的第一个文本节点。这不会弄乱元素上的事件处理程序：

   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.

   实例| 直播源