選擇/高亮

Question

這裏是我的jsfiddle：

Highlight issue after selecting text across multiple li tags

，並在我使用下面的代碼添加跨度後突出顯示文本

var range = window.getSelection().getRangeAt(0); 
content = range.extractContents(); 
span = document.createElement('SPAN'); 
span.className='startIndex-'+startIndex+' endIndex-'+endIndex+''; 
span.style.background = 'pink'; 
span.appendChild(content); 
var htmlContent = span.innerHTML; 
range.insertNode(span); 

這裏在多個li上選擇文本我在onclick函數中傳遞選定文本的開始索引和結束索引。

但點擊按鈕同時highligting它打破了選擇的內容到新立並保持後

加入新的標籤裏有我要強調選擇的範圍，而不會影響HTML後。

有誰知道如何阻止HTML行爲不當，並正確突出顯示它。

Answer 1

如果你只是想改變風格，你不只是添加一個類？
的Javascript：

 var el = document.getElementById('hello'); 
    el.className ="red" 

CSS

.red{ 
    background: red; 
}