通过select的value值来改变textarea内字体和大小
<!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内字体和大小的更多相关文章
- 改变placeholder的字体颜色大小
input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333; } input::-moz- ...
- 小程序中监听textarea或者input输入的值动态改变data中数组的对象的值
Page({ data: { todoLists:[ { detail:"", date:"", location:"", priority ...
- select change下拉框改变事件 设置选定项,禁用select
select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...
- CSS3魔法堂:禁止用户改变textarea大小
一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...
- Bean熟悉替换,只替换部分属性,其他属性值不改变
Bean熟悉替换,只替换部分属性,其他属性值不改变 需要加入:asm.jar cglib-2.1.jar,用来map和bean之间的转换(比spring和反射的效率好,因为加入了缓存) packag ...
- jquery获得select option的值 和对select option的操作
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
- JS实现选择不同select标签option值的验证
js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...
- Js操作Select大全(取值、设置选中)
Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<s ...
随机推荐
- easyUI-combobox 动态绑定数据源
前台 <link rel="stylesheet" type="text/css" href="../css/easyui.css"/ ...
- R画图中英文字体完美解决方案
在某些时候,需要在R画图中添加中文,但是默认情况下,R对中文的支持不好. 当用R画PDF图,并且图中有中文的时候,安装并加载如下包library(showtext)然后:showtext.auto(e ...
- linux的三种安装软件包的方式(小白的学习之旅)
tar包,整个安装过程可以分为以下几步: 1) 取得应用软件:通过下载.购买光盘的方法获得: 2) 解压缩文件:一般tar包,都会再做一次压缩,如gzip.bz2等,所以你需要先解压.如果是最常见的g ...
- json接口
http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz2 ...
- OpenCV2+入门系列(一):OpenCV2.4.9的安装与测试
这里假设看到这篇文章的人都已经对OpenCV以及机器视觉等最基础的概念有了一定的认识,因此本文不会对OpenCV做任何的介绍,而是直接介绍OpenCV2.4.9的安装与测试.此外本文只是简单的介绍如何 ...
- OpenCV从入门到放弃系列之——如何扫描图像、利用查找表和计时
目的 如何遍历图像中的每一个像素? OpenCV的矩阵值是如何存储的? 如何测试我们所实现算法的性能? 查找表是什么?为什么要用它? 测试用例 颜色空间缩减.具体做法就是:将现有颜色空间值除以某个输入 ...
- 界面布局之表格布局TableLayout+TableRow
一.基础知识: TableLayout置底,TableRow在TableLayout的上面,而Button.TextView等控件就在TableRow之上, 另外,TableLayout之上也可以单独 ...
- JAVA 1.2(原生数据类型 Primitive Data Type)
1. Java的数据类型分为2类 >> 原生数据类型(primitive data type) >> 引用数据类型(reference data type) 3. 常量和变量 ...
- Javascript 知识点整理
1.十进制和十六进制相互转换 /* 十六进制转十进制 */ var test = FF; var x = parseInt(test ,16); //方法一 x = parseInt('0x'+tes ...
- IaaS、PaaS、SaaS 之间的区别
IaaS.PaaS.SaaS 之间的区别 “云服务”现在已经快成了一个家喻户晓的词了.如果你还不知道PaaS.IaaS和SaaS的区别,那就太out了. “云”其实是互联网的一个隐喻,“云计算”其实就 ...