通过select的value值来改变textarea内字体和大小

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
     <title>test</title>
     <style>

         #texts{
             font-family: '黑体';
             font-size: 18px;}

     </style>
     <script>
         function changeSize(size){
             var texts = document.getElementById('texts');
             texts.style.fontSize = size.value;
         }

         function changeFamily(family){
             var texts = document.getElementById('texts');
             texts.style.fontFamily = family.value;
         }

     </script>
 </head>
 <body>
 <form action="#"></form>
     <label for="fontFamil">字体：</label>
         <select name="fontFamil" id="fontFamil" onchange="changeFamily(this)">
             <option value="Microsoft YaHei">Microsoft YaHei</option>
             <option value="Arial">Arial</option>
             <option value="宋体">宋体</option>
             <option value="黑体">黑体</option>
             <option value="sans-serif">sans-serif</option>
         </select>

         <label for="fontsize">字号：</label>
         <select name="fontsize" id="fontsize" onchange="changeSize(this)">
             <option value="10px">12px</option>
             <option value="14px">14px</option>
             <option value="16px">16px</option>
             <option value="18px">18px</option>
             <option value="20px">20px</option>
             <option value="22px">22px</option>
             <option value="24px">24px</option>
         </select>
             <br />
             <br />
             <br />
             <br />
             <br />
             <br />
     <textarea name="texts" id="texts" cols="30" rows="10" placeholder="Hello World"></textarea>
 </body>
 </html>