<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Размер шрифта</p>
<select id="select" onchange="changeselect()">
</select>
<p style="position:absolute;left:150px;top:0px;">Цвет шрифта</p>
<input id="textcolor" type="color" style="position:relative;left:100px;">
<p style="position:absolute;left:270px;top:0px;">Стиль шрифта</p>
<select id="styleselect" onchange="changestyle()" style="position:relative;left:180px;top:0px;">
<option value="1">normal</option>
<option value="2">italic</option>
<option value="3">bold</option>
</select>
<p><textarea id="usertext">
юзертекст
</textarea></p>
<script>
for (let i = 0 ; i < 250;i++){
let option = document.createElement('option');
option.text = i;
option.value = i;
document.querySelector('#select').add(option);
}
document.querySelector('#select').value = "25";
document.querySelector('#usertext').style.height = "500px";
document.querySelector('#usertext').style.width = "1000px";
textcolor.addEventListener("change",setcolor);
function setcolor(){
let valuecolor = document.querySelector('#textcolor').value;
document.querySelector('#usertext').style.color = valuecolor;
}
function changeselect(){
let select = document.querySelector('#select');
let value = select.options[select.selectedIndex].value;
document.querySelector('#usertext').style.fontSize = value+"px";
}
function changestyle(){
let select = document.querySelector('#styleselect');
let value = select.options[select.selectedIndex].value;
if (value == 1){
document.querySelector('#usertext').style.fontWeight ="normal";
document.querySelector('#usertext').style.fontStyle ="normal";
}
if (value == 2){
document.querySelector('#usertext').style.fontStyle ="italic";
}
if (value == 3){
document.querySelector('#usertext').style.fontWeight = "bold";
}
}
</script>
</body>
</html>
| 