如何使用javascript保持getSelection活动

Question

我试图通过点击按钮来改变我的div中选定文本的字体大小，但当我按下按钮时，我失去了突出显示/选择。我怎么能保持文本突出显示/选择，而我也按下我的按钮。

function sizeup(event) {
event.preventDefault();
var selectedText = document.getSelection();
//please compelete after here😢😢😢😢😢

}

<!--Html here-->
<div contenteditable="true" style="height:200px;">
<button onclick="sizeup(event)">SIZEUP</button>

Answer 1

您可以通过ID选择元素，然后操作font-size:

function changeFontSize() {
var selectedText = "";
if (window.getSelection) {
selectedText = window.getSelection().toString();
var newContent = document.getElementById('myDiv').innerHTML.replace(selectedText, '<span style="font-size:30px;">'+selectedText+'</span>');
document.getElementById('myDiv').innerHTML = newContent;
}
}

<div id="myDiv" contenteditable="true" style="height:100px;">asdasd</div>
<button onclick="changeFontSize()">SIZEUP</button>