下拉菜单--字体练习

最新推荐文章于 2023-02-26 21:55:11 发布

公子薛

最新推荐文章于 2023-02-26 21:55:11 发布

阅读量795

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/xgcfxl2011/article/details/8253600

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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" οnchange="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>

运行结果：

公子薛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单--字体练习

无标题文档#div1{ background-color:#FFCC00; width:320px; height:80px; }#div2{ background-color:#CCCCCC; width:320px; }#selid{ margin-top:15px; margin-bottom:15px; }function selStyle(){
复制链接

扫一扫

专栏目录