下拉菜单--字体练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">
#div1{
	background-color:#FFCC00;
	width:320px;
	height:80px;
	}
#div2{
	background-color:#CCCCCC;
	width:320px;
	}
#selid{
	margin-top:15px;
	margin-bottom:15px;
	}
</style>

<script type="text/javascript">

function selStyle()
{
	var divNode1 = document.getElementById("div1");
	var divNode2 = document.getElementById("div2");
	
	var selNode = document.getElementById("selid");
	
	with(selNode)
	{
		var val = options[selectedIndex].value;
		divNode1.style.textTransform = val;
		divNode2.innerHTML = "text-transform : " + val + ";";
	}
}
</script>

</head>

<body>

<div id="div1">
Every man dies, Not every man really lives.
</div>

<select id="selid" onchange="selStyle()">
	<option value="none">--text-transform--</option>
	<option value="uppercase">UPPERCASE</option>
	<option value="lowercase">lowercase</option>
</select>
<div id="div2">
text-transform : none;
</div>
</body>
</html>

运行结果:


你可能感兴趣的:(下拉菜单--字体练习)