js多选框改变标题和内容颜色

最新推荐文章于 2024-01-03 16:21:03 发布

shenziyan1985

最新推荐文章于 2024-01-03 16:21:03 发布

阅读量767

点赞数

分类专栏： javascript实例文章标签： javascript

本文链接：https://blog.csdn.net/shenziyan1985/article/details/123635236

版权

javascript实例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

shenziyan1985

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js多选框改变标题和内容颜色

<!DOCTYPE ><html> <head> <meta charset="utf-8"/> <title>多选框控制标题和文本颜色</title> <style> .main{ width:60%; margin:auto; }...
复制链接

扫一扫