通过select的value值来改变textarea内字体和大小
Posted 巫瞅瞅
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过select的value值来改变textarea内字体和大小相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>test</title> 6 <style> 7 8 #texts{ 9 font-family: ‘黑体‘; 10 font-size: 18px;} 11 12 </style> 13 <script> 14 function changeSize(size){ 15 var texts = document.getElementById(‘texts‘); 16 texts.style.fontSize = size.value; 17 } 18 19 20 function changeFamily(family){ 21 var texts = document.getElementById(‘texts‘); 22 texts.style.fontFamily = family.value; 23 } 24 25 </script> 26 </head> 27 <body> 28 <form action="#"></form> 29 <label for="fontFamil">字体：</label> 30 <select name="fontFamil" id="fontFamil" onchange="changeFamily(this)"> 31 <option value="Microsoft YaHei">Microsoft YaHei</option> 32 <option value="Arial">Arial</option> 33 <option value="宋体">宋体</option> 34 <option value="黑体">黑体</option> 35 <option value="sans-serif">sans-serif</option> 36 </select> 37 38 <label for="fontsize">字号：</label> 39 <select name="fontsize" id="fontsize" onchange="changeSize(this)"> 40 <option value="10px">12px</option> 41 <option value="14px">14px</option> 42 <option value="16px">16px</option> 43 <option value="18px">18px</option> 44 <option value="20px">20px</option> 45 <option value="22px">22px</option> 46 <option value="24px">24px</option> 47 </select> 48 <br /> 49 <br /> 50 <br /> 51 <br /> 52 <br /> 53 <br /> 54 <textarea name="texts" id="texts" cols="30" rows="10" placeholder="Hello World"></textarea> 55 </body> 56 </html>
以上是关于通过select的value值来改变textarea内字体和大小的主要内容，如果未能解决你的问题，请参考以下文章
vue 通过赋值改变select的value怎么触发change事件
Excel 集成为 Sum 提供 0，但通过指定值来添加单元格的 #Value :(
jquery怎么根据value来动态选中select下的option