（15）根据不同盒子和下拉菜单选择颜色，给文本赋予不同的颜色

来源：互联网发布：类似聚合数据的网站编辑：程序博客网时间：2024/05/19 22:28

一、需求：点击不同的颜色方框，让文本显示不同的颜色
1）盒子悬浮：float
文字不浮：clear
2）注意平时变量名的取法，color是个关键字

<style type="text/css">    .clrclass    {        height:50px;        width:50px;        float:left;        margin-right:30px;    }    div#text    {        clear:left;        margin-top:60px;    }</style>  <script type="text/javascript">  function changeColor(node)  {       //获取颜色,注意不能用color，它是关键字       colorVal=node.style.backgroundColor;       //根据id获取文本div       var divNode=document.getElementById("text");       divNode.style.color=colorVal;//设置字体颜色用color属性  }  </script></head><body>      <div class="clrclass" id="clr1" style="background-color:#F3F" onclick="changeColor(this)"></div>     <div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>      <div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>       <div id="text">       需要显示的内容<br/>       需要显示的内容<br/>       需要显示的内容<br/>       需要显示的内容<br/>       </div></body></html>

这里写图片描述
二、根据下拉菜单选择颜色，给文字内容赋予不同的颜色
下拉菜单标签：select
下拉菜单用到的事件是onchange：当对象或者选中区的内容发生改变是才会触发该事件
获取所有的option：oselected.all（获取的是个集合）
获取哪个被选中：oselected.selectedIndex

<style type="text/css">   #text   {       margin-top:30px;   }</style>  <script type="text/javascript">    function changeColor(node)    {        alert("颜色改变")        //获取所有的option        var CollOptNodes=node.options;        //获取被选中的索引        var index=node.selectedIndex;        //根据索引获取option对象，并获取其颜色值        var colorVal=CollOptNodes[index].value;        //获取文本对象并赋予颜色        document.getElementById("text").style.color=colorVal;    }  </script></head><body> <select name="textColr"  onchange="changeColor(this)">      <option value="none" >--选择颜色--</option>      <option value="red" >红色</option>      <option value="blue" >蓝色</option>      <option value="green" >绿色</option>      <option value="black" selected="selected" >黑色</option>  </select>  <div id="text">       需要显示的内容<br/>       需要显示的内容<br/>       需要显示的内容<br/>       需要显示的内容<br/>       </div></body></html>

这里写图片描述

阅读全文

0 0