Question

我想突出显示使用Javascript更改所选文本颜色的功能。我使用以下方法。

function android_selection_highlight(replacrmenthtml){
    try {
        if (window.getSelection) {
            sel = window.getSelection();
            var range = sel.getRangeAt(0);

            var selectionStart = $("<span style=\"color:red\">");
            var startRange = document.createRange();
            startRange.setStart(range.startContainer, range.startOffset);


            var selectionEnd = $("</span>");
            var endRange = document.createRange();
            endRange.setStart(range.endContainer, range.endOffset);

            startRange.insertNode(selectionStart[0]);
            endRange.insertNode(selectionEnd[0]);
        }
    }
    catch (e) {

    }
}

但是当我调用方法时它会给出DOM异常。我认为当我在所选文本前面插入起始span标记时，它会破坏DOM结构，因为此时没有结束标记。如何解决这个问题？

被修改：会有一个高亮按钮。选择文本，如果用户单击突出显示按钮，则所选文本的文本颜色将更改。

Answer 1

如果选择你要改变颜色，请使用此代码。

    ::-moz-selection { color: red;}
    ::selection { color: red; }

Answer 2

我知道这是一个JS问题，但是有一个CSS选择器允许你这样做。

::selection {
  color: red;
}

如果浏览器认为您做出了无法访问的选项，则可能会覆盖您的颜色。并非所有东西都可以这种方式设计，但颜色和背景颜色可以。

更多信息：

HTML中所选文本的颜色更改

2 个答案: