Tryit My-Help HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>

body{
 background-color:#f2f2f2;
}

.mybox{
 max-width:800px;
 margin:10px auto;
 padding:10px;
 background-color:#fff;
 box-shadow: 2px 5px 30px rgba(0,0,0,.1);
}

.maintext{
 padding:10px;
 background-color:#fff;
 box-shadow: 2px 5px 30px rgba(0,0,0,.1);
}

</style>
</head>
<body>

<form>
Font Family:
<select id="font">
<option value="tahoma">tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Monospace">Monospace</option>
</select>

Font Size:
<select id="size">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="7">7</option>
<option value="10">10</option>
</select>
Font Color
<input type="color" id="colortext">
</form>

<h2>متن انتخاب شده توسط کاربر</h2>
<div class="changeme mybox" id="usertext"></div>

<p><b>با ماوس قسمتی از متن را انتخاب کنید</b></p>

function getSelectedText() { 
var selectedText = '';

if (window.getSelection) { 
selectedText = window.getSelection(); 
}

else if (document.getSelection) { 
selectedText = document.getSelection(); 
} 
 
else if (document.selection) { 
selectedText = document.selection.createRange().text; 
} else return;

document.getElementById("usertext").innerHTML = selectedText; 
}

$("#font").change(function() {
    $('.changeme').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('.changeme').css("font-size", $(this).val() + "em");
});

$("#colortext").change(function() {
    $('.changeme').css("color", $(this).val());
});

</script>

</body>
</html>

Www.Free-Learn.Ir