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

最新推荐文章于 2021-09-08 18:48:31 发布

weixin_30413739

最新推荐文章于 2021-09-08 18:48:31 发布

阅读量222

点赞数

原文链接：http://www.cnblogs.com/cai-yu-candice/p/6057634.html

版权

 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>