I am trying to change font-size of the selected text in my div by clicking a button but when I press my button i lose the highlight/selection. How can I keep the text highlighted/selected while I also press my button.
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>You can select the element by its ID and then manipulate the 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>