代码实现
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 900px;height: 695px;margin: 100px auto;border: #000000 2px solid;}.h1{color: #00CED1;text-align: center;height: 50px;background-color: antiquewhite;}.change{height: 70px;background-color: beige;}.selectColor,.size,.fontStyle{position: relative;width: 200px;height: 40px;top:15px;font-size: 20px;text-align: center;}.selectColor{left: 40px;}.size{left: 150px;}.fontStyle{left: 240px;}#text{width: 900px;height: 574px;border: 0;font-size: 30px;background-color: antiquewhite;}</style></head><body><div class="box"><!-- 标题 --><div><h1 class="h1">文本编辑器</h1></div><!-- 选择器 --><div class="change"><select class="selectColor" onchange="color()" id="scolor"><option value ="" hidden>颜色</option><option value ="red">红色</option><option value ="blue">蓝色</option><option value ="green">绿色</option></select><select class="size" onchange="si()" id="ssize"><option value ="" hidden>字号</option><option value ="30px">小</option><option value ="60px">中</option><option value ="90px">大</option></select><select class="fontStyle" onchange="fontStyles()" id="fonts"><option value ="" hidden>字体</option><option value ="宋体">宋体</option><option value ="楷体">楷体</option><option value ="隶书">隶书</option></select></div><!-- 文本输入界面 --><div><textarea id="text"></textarea></div></div></body></html><script type="text/javascript">function color(){var colors = document.getElementById("scolor").value;var text = document.getElementById("text");text.style.color = colors;}function si(){var sizes = document.getElementById("ssize").value;var text = document.getElementById("text");text.style.fontSize = sizes;}function fontStyles(){var fstyle = document.getElementById("fonts").value;var text = document.getElementById("text");text.style.fontFamily = fstyle;}</script>
测试图片
