<!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. 小程序中监听textarea或者input输入的值动态改变data中数组的对象的值

    Page({ data: { todoLists:[ { detail:"", date:"", location:"", priority ...

  3. select change下拉框改变事件 设置选定项,禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  4. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  5. CSS3魔法堂:禁止用户改变textarea大小

    一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...

  6. Bean熟悉替换,只替换部分属性,其他属性值不改变

    Bean熟悉替换,只替换部分属性,其他属性值不改变 需要加入:asm.jar  cglib-2.1.jar,用来map和bean之间的转换(比spring和反射的效率好,因为加入了缓存) packag ...

  7. jquery获得select option的值 和对select option的操作

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...

  8. JS实现选择不同select标签option值的验证

    js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...

  9. Js操作Select大全(取值、设置选中)

    Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<s ...

随机推荐

  1. 【前端】JSON.stringfy 和 JSON.parse(待续)

    JSON.stringfy 和 JSON.parse(待续) 支持全局对象JSON的浏览器有:IE8+, FireFox3.5+, Safari4+, Chrome, Opera10.5+ JSON. ...

  2. InfoPackage的更新模式

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. SQL检查锁&解锁

    use master go --检索死锁进程 select spid, blocked, loginame, last_batch, status, cmd, hostname, program_na ...

  4. C# java MD5加密方不一致问题

    说来惭愧,做开发几年了,一直在吸取,今天也写写自已关于技术的一点点理解,不正之处,请大家多多指点. 由于之前开发的项目使用的是C#,用户信息使用的C#的MD5加密码方式,而现在需要切换到Java平台下 ...

  5. vmware 三种网络模式

    Bridged方式:vm相当于局域网内的一台独立主机.可以通过局域网的网关访问互联网.vm和宿主机的关系就像连接在同一个hub的两个电脑. NAT方式(网络地址转换模式):vm可以上外网,可以访问宿主 ...

  6. 退役&&搬家

    牡丹江与鞍山两站作为最后的结束站.一银一铜就此结束了~ 此博客用来怀念ACM就此保留并不添加任何其它与其无关内容. ------------------------------------------ ...

  7. RansomNote

    
Given
 an 
arbitrary
 ransom
 note
 string 
and 
another 
string 
containing 
letters from
 all 
th ...

  8. 个人psp

    排球计分程序 1.计划 通过对用户故事估计这个任务需要3~5d天. 2.开发 2.1需求分析 作为一个观众,我希望了解每场比赛的比分,以便了解比赛的情况. 作为一个观众,我希望输入球队名称查询球队比分 ...

  9. 常见电子元器件检测方法。——Arvin

    电子设备中使用着大量各种类型的电子元器件,设备发生故障大多是由于电子元器件失效或损坏引起的.因此怎么正确检测电子元器件就显得尤其重要,这也是电子维修人员必须掌握的技能.我在电器维修中积累了部分常见电子 ...

  10. Android文件存储

    文件存储是Android中最基本的一种数据存储方式,它不读存储的内容进行任何的格式化处理,所有数据原封不动的保存在文件之中.如果想用文件存储的方式保存一些较为复杂的数据,就需要定义一套自己的格式规范, ...