<!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>






 


												


											
通过select的value值来改变textarea内字体和大小的更多相关文章
	

    
								
  1. 改变placeholder的字体颜色大小
		
    input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333; } input::-moz- ...
    
		
    2. 
						
  2. 小程序中监听textarea或者input输入的值动态改变data中数组的对象的值
		
    Page({ data: { todoLists:[ { detail:"", date:"", location:"", priority ...
    
		
    3. 
						
  3. select change下拉框改变事件 设置选定项，禁用select
		
    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
    
		
    4. 
						
  4. js/jquery获取文本框的值与改变文本框的值
		
    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...
    
		
    5. 
						
  5. CSS3魔法堂：禁止用户改变textarea大小
		
    一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...
    
		
    6. 
						
  6. Bean熟悉替换，只替换部分属性，其他属性值不改变
		
    Bean熟悉替换,只替换部分属性,其他属性值不改变 需要加入:asm.jar  cglib-2.1.jar,用来map和bean之间的转换(比spring和反射的效率好,因为加入了缓存) packag ...
    
		
    7. 
						
  7. jquery获得select option的值 和对select option的操作
		
    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...
    
		
    8. 
						
  8. JS实现选择不同select标签option值的验证
		
    js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...
    
		
    9. 
						
  9. Js操作Select大全(取值、设置选中)
		
    Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<s ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MFC动态创建菜单
			
    http://blog.csdn.net/csdnzhwk/article/details/47395639
    
			
    2. 
						
  2. [转]表结构设计器EZDML介绍说明（包含修改配置文件，修改文本字段属性）
			
    超轻量级的表结构设计工具,这是一个数据库建表的小软件,可快速的进行数据库表结构设计,建立数据模型.类似大家常用的数据库建模工具如PowerDesigner.ERWIN.ER-Studio和Ration ...
    
			
    3. 
						
  3. rewrite规则中参数多于9个的处理方式 apache nginx
			
    RewriteRule ^index-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)(.*)$ $9&a ...
    
			
    4. 
						
  4. 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)
			
    物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)   2015年11月14日|    by: nbboy|    Category: 系统设计, 缓存设计, 高性能系统 摘要 ...
    
			
    5. 
						
  5. PHP---Mysql常用语法（增删改查）
			
    1.数据库操作:                                                                        创建数据库:create databas ...
    
			
    6. 
						
  6. java回调初步学习
			
    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17483273),请尊重他人的辛勤劳动成果,谢谢以前不理解什 ...
    
			
    7. 
						
  7. Query Designer：公式冲突
			
    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
    
			
    8. 
						
  8. 淘宝网触屏版 - 学习笔记（0 - 关于dpr）
			
    注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name=&qu ...
    
			
    9. 
						
  9. Java知识积累-XML的DOM解析修改和删除方法
			
    import java.io.File; import java.io.IOException; import javax.xml.parsers.DocumentBuilder;import jav ...
    
			
    10. 
						
  10. reggetvalue在xp下加载失败
			
    在windows 32bit的xp下使用reggetvalue会提示,无法定位程序输入点reggetvalueW于动态链接库advapi32.dll(UNICODE).reggetvalueA也是无法 ...
    
			
    11.