<!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. T检验与F检验的区别_f检验和t检验的关系
			
    1,T检验和F检验的由来 一般而言,为了确定从样本(sample)统计结果推论至总体时所犯错的概率,我们会利用统计学家所开发的一些统计方法,进行统计检定. 通过把所得到的统计检定值,与统计学家建立了一 ...
    
			
    2. 
						
  2. 解决Spark读取Hive分区表出现Input path does not exist的问题
			
    假设这里出错的表为test表. 现象 Hive读取正常,不会报错,Spark读取就会出现: org.apache.hadoop.mapred.InvalidInputException: Input  ...
    
			
    3. 
						
  3. VIM常用设置
			
    批量替换:  #:%s/source_pattern/target_pattern/g "My Custom Configuration filetype plugin indent on  ...
    
			
    4. 
						
  4. 空间点绕轴旋转公式&程序(C++)
			
    关键词:空间旋转.旋转轴 用途:相机位姿估计.无人机位姿估计.3D游戏.3D建模 文章类型:概念.公式总结(本文不带推倒过程,若想了解公式是如何推出来的请搜索文献),C++函数展示 @Author:V ...
    
			
    5. 
						
  5. godep 包管理工具
			
    godep是解决包依赖的管理工具 安装 go get github.com/tools/godep 成功安装后,在GOPATH的bin目录下会有一个godep可执行的二进制文件,后面执行的命令都是用这 ...
    
			
    6. 
						
  6. (转)Linux grep
			
    文章转自 http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2856896.html 简介 grep (global search regular ...
    
			
    7. 
						
  7. 谈谈Memcached与Redis
			
    1. Memcached简介 Memcached是以LiveJurnal旗下Danga Interactive公司的Bard Fitzpatric为首开发的高性能分布式内存缓存服务器.其本质上就是一个 ...
    
			
    8. 
						
  8. Mac系统下配置JDK环境变量
			
    第一次用Mac做开发,在网上也搜索了一些环境变量配置的文章,在此总结一下以方便日后使用. 1.打开终端Terminal: 2.进入当前用户主目录,cd ~: 3.临时授权,sudo su: 4.输入密 ...
    
			
    9. 
						
  9. .Net4.0的网站在IE10、IE11出现“__doPostBack未定义”的解决办法。
			
    方法一.浏览器设置成兼容模式. 方法二.安装服务器版的.Net40的补丁.http://download.csdn.net/detail/5653325/6642051 方法三.点击VS的工具菜单-- ...
    
			
    10. 
						
  10. iOS多线程
			
    关于iOS多线程 概述 这篇文章中,我不会说多线程是什么.线程和进程的区别.多线程有什么用,当然我也不会说什么是串行.什么是并行等问题,这些我们应该都知道的. 在 iOS 中其实目前有 4 套多线程方 ...
    
			
    11.