<!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="changeboldstyle()" style="position:relative;left:180px;top:0px;">
<option value="normal">обычный</option>
<option value="bold">жирный</option>
</select>
<p style="position:absolute;left:420px;top:0px;">Наклонность шрифта</p>
<select id="styleselect2" onchange="changeboldstyle2()" style="position:relative;left:240px;top:0px;">
<option value="normal">обычный</option>
<option value="italic">курсив</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 changeboldstyle(){
let select = document.querySelector('#styleselect');
let value = select.options[select.selectedIndex].value;
document.querySelector('#usertext').style.fontWeight = value;
}
function changeboldstyle2(){
let select = document.querySelector('#styleselect2');
let value = select.options[select.selectedIndex].value;
document.querySelector('#usertext').style.fontStyle = value;
}
</script>
</body>
</html>
| 