以下代码的功能是,动态修改网页文字的颜色、字体样式。
代码放于两个位置,一个是JS代码,放在Head之后Body之前。
此外,文本内容放在body的DIV中。
<html>
<head> <title>文字变色、变字体</title>
</head>
<script>
function changeColor()
{
var title = document.getElementById("title").value;
var select = document.getElementById("selector").value;
if(select=="two")
{
document.getElementById("title").style.color="green";
}
else document.getElementById("title").style.color="red";
}
function changeStyle()
{
var title = document.getElementById("title").value;
var select = document.getElementById("selector2").value;
if(select=="two")
{
document.getElementById("title").style.fontFamily="Times New Roman";
}
else
document.getElementById("title").style.fontFamily="隶书";
}
</script>
<body>
<div id="title">大众计算机学习网</div><br>
<select name="selector" id="selector" onchange="changeColor()">
<option value="one">红色 </option>
<option value="two">绿色 </option>
</select>
<select name="selector2" id="selector2" onchange="changeStyle()">
<option value="one">隶书 </option>
<option value="two">楷体 </option>
</select>
</body>
</html>
简单的方法就是,将如上代码直接复制粘贴到你的测试Web,进行浏览,效果就出来了。以上代码仅是一种示例,您完全可以根据自己的需要,修改如上代码,让其功能更加完善。