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>
