JS下拉菜单实现字体大小(实例)

来源:互联网 发布:网上的原油期货软件 编辑:程序博客网 时间:2024/04/29 16:52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlsns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function changeCont()
{
 var num=document.getElementById("select");
 var optValue=num.value;
 //alert(optValue);
 var divCont=document.getElementById("div1");
 divCont.style.fontSize=(optValue*10)+'px';
 if(optValue==1){document.getElementById("div1").style.color='red';}
 if(optValue==2){document.getElementById("div1").style.color='blue';}
 if(optValue==3){document.getElementById("div1").style.color='green';}
 if(optValue==4){document.getElementById("div1").style.color='red';}
 if(optValue==5){document.getElementById("div1").style.color='pink';}

}
</script>
</head>

<body>
<select id="select" onchange="changeCont()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="div1">改变文字大小</div>
</body>
</html>

原创粉丝点击