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

Question

嗨,我想尝试用javascript设置子字符串.这是我的代码:

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

子字符串函数有效,但是当我添加样式时,错误控制台会给出错误"undefined".如何使用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.

   实例 | 直播源