如何更改 window.getSelection() 的字体样式

Question

我想知道在单击 [=26] 后如何 更改 selected 文本的字体样式 ，使用 window.getSelection() =]按钮.

例如，假设我们有以下短语：

Hello world!

如果我只是 select 来自它的字符串 ell 然后点击一个按钮，它将 return （在这种情况下，例如粗体类型):

Hello world!

那么，我该怎么做呢？我的主要问题是：什么变量类型 我应该转换 window.getSelection() 来改变 font style，因为它return是一个object，如果我这样做了.toString()，也没什么用.

Answer 1

您希望将突出显示的文本包围到您添加新样式的新节点中。查看此答案 How To Wrap / Surround Highlighted Text With An Element

Answer 2

function surroundSelection() {
        var span = document.createElement("span");
        span.style.fontWeight = "bold";
        span.style.color = "black";

        if (window.getSelection) {
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var range = sel.getRangeAt(0).cloneRange();
                range.surroundContents(span);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    }

<input type="button" onclick="surroundSelection()" value="Surround">
    <div contenteditable="true">Hello World</div>

如何更改 window.getSelection() 的字体样式

How to change font style of window.getSelection()

javascript

html

font-style