<!DOCTYPE >
<html>
<head>
<meta charset="utf-8"/>
<title>多选框控制标题和文本颜色</title>
<style>
.main{
width:60%;
margin:auto;
}
.img1{
width:100%;
margin:auto;
text-align: center;
}
.img1>img{
width:80%;
height:400px;
margin:10px auto;
}
.head1{
width: 15%;
float:left;
font-size:18px;
font-weight: bold;
}
.body1{
text-indent: 2em;
line-height: 25px;
}
.left{
float:left;
margin-top:2px;
width:50%;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="main">
<div>
<div id="head1" class="head1">看一片花海</div>
<div class="left">
<form name="form1">
<select name="heading" οnchange="changeHand()">
<option value="black">黑色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
</select>
选择不同的颜色看看标题变吗？
</form>
</div>
</div>
<div class="clear"></div>
<div id="body1" class="body1">
花海的浪漫，神话的唯美，所谓的美丽的邂逅，也许只是童话对世人遥远的诉说，终是一场梦幻，湮灭在别愁伤絮。也许，只是彼此生命中的过客
<form name="form2" >
<select name="bodying" οnchange="changeBody()">
<option value="black">黑色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
</select>
选择不同的颜色看看内容变吗？
</form>
</div>
<div class="img1">
<img src="hhpic.jpeg" />
</div>
</div>
<script>
function changeHand(){
var i=document.form1.heading.selectedIndex;
//alert(i);
headcolor=document.form1.heading.options[i].value;
document.getElementById("head1").style.color=headcolor;
}
function changeBody(){
var i=document.form2.bodying.selectedIndex;
bodycolor=document.form2.bodying.options[i].value;
document.getElementById("body1").style.color=bodycolor;
}
</script>
</body>
</html>
js多选框改变标题和内容颜色
最新推荐文章于 2024-01-03 16:21:03 发布
2940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
