<html>
<head>
<title>Controlling Styles with JavaScript</title>
<script language="JAvascript" type="text/javascript">
function changehead(){
i=document.form1.heading.selectedIndex;
headcolor=document.form1.heading.options[i].value;
document.getElementById("head1").style.color=headcolor;
}
function changehead2(){
i=document.form1.head2.selectedIndex;
head2color=document.form1.body.options[i].value;
document.getElementById("head2").style.color=head2color;
}
function changebody(){
i=document.form1.body.selectedIndex;
bodycolor=document.form1.body.options[i].value;
document.getElementById("p1").style.color=bodycolor;
}
</script>
</head>
<body>
<h1 id="head1">欢迎来到这个页面。</h1>
<hr>
<h2 id="head2">使用dom来改变样式。</h2>
<hr>
<p id="p1">hsafjkhygtuireghijksfuiasyrncjkdsfhyuri jfiorut uturiouqgt ut irout</p>
<form name="form1">
<b>标题1的颜色：</b>
<select name="heading" onChange="changehead();">
<option value="black">黑色</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
</select>
<br>
<b>标题2的颜色：</b>
<select name="head2" onChange="changehead2();">
<option value="black">黑色</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
</select>
<br>
<b>正文的颜色：</b>
<select name="body" onChange="changebody();">
<option value="black">黑色</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
</select>
</form>
</body>
</html>学了js入门经典的12章，使用样式表。写出来的比较啰嗦的程序。
想实现如下（还未实现）：
创建一个ChangeColor函数，为要改变的元素设置一个参数，然后修改onChange事件处理程序，把合适的元素id值作为参数发送给该函数。
等再学学js，回来一定要实现这个。
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
