Question

可能重复：
How to use the Javascript to add/remove the CSS/colour style to the html page?

我对HTML和javascript有疑问。我得到了以下的paragrahe。

function add_span(){
     // ??
}

<input type="button" onclick="add_span()" value="add span"/>
<p> statement1, statement2, statement3 </p>

用户

后是否可以获得以下结果？

用鼠标选择突出显示的文字
点击按钮

e.g。

突出显示'statement1'，
点击按钮

预期结果：

<input tupe="button" onclick="add_span()" value"add span"/>
<p> <span class="ABC">statement1,</span> statement2, statement3 </p>

// updated code in the add_span

    var selectedText;

    if (window.getSelection)
    {
        selectedText = window.getSelection();
    }
    else if (document.getSelection) // FireFox
    {
        selectedText = document.getSelection();
    }
    else if (document.selection)  // IE 6/7
    {
        selectedText = document.selection.createRange().text;
    }

    //create the DOM object
    var newSpan = document.createElement('span');
    // add the class to the 'spam'
    newSpan.setAttribute('class', 'ABC');
    document.getElementById('text').appendChild(newSpan);   
    var selectedTextNode = document.createTextNode(); 
    newSpan.appendChild(selectedTextNode);

Answer 1

您可以从@Pezhvak IMV的答案中获取选定的文字：

var selectedText;
if (window.getSelection)
{
    selectedText = window.getSelection();
}
else if (document.getSelection) // FireFox
{
    selectedText = document.getSelection();
}
else if (document.selection)  // IE 6/7
{
    selectedText = document.selection.createRange().text;
}

要添加元素，您必须创建DOM节点，设置其属性并添加元素：

创建DOM节点：

var newSpan = document.createElement（'span'）;
设置班级

newSpan.setAttribute（'class'，'ABC'）;
将范围添加到<p>下方（<p>应该有ID或某种识别机制：
将<span>添加到<p>
下
的document.getElementById（ '文本'）的appendChild（newSpan）。
并设置文字

newSpan.innerHTML = selectedText;

您也可以使用createTextNode（步骤5的替代方案）

var selectedTextNode = document.createTextNode(); 
newSpan.appendChild(selectedTextNode);

Answer 2

回答部分问题：

function getSelText() {
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection) // FireFox
    {
        txt = document.getSelection();
            }
    else if (document.selection)  // IE 6/7
    {
        txt = document.selection.createRange().text;
            }
    else return; document.aform.selectedtext.value =  txt; }

Answer 3

[编辑]使用surroundContents

替换了该功能

这是一个能够完成你所问的[我认为]的功能。在this jsfiddle中查看。

function surroundSelection() {
    var element = document.createElement('span');
    element.className = "ABC";
    var sel = window.getSelection() ||
              document.getSelection() ||
             (document.selection ? document.selection.createRange() : null);
    if (sel.rangeCount) {
            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(element);
            sel.removeAllRanges();
            sel.addRange(range);
            sel.removeAllRanges();
    }
}

对于IE＆lt; 9，您必须搜索获取选择的方法，例如here。

如何通过javascript添加<span>？</span>

3 个答案: