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

最新推荐文章于 2021-12-29 11:03:25 发布

FixedStarHaHa

最新推荐文章于 2021-12-29 11:03:25 发布

阅读量847

点赞数

分类专栏： DOM 文章标签： color 需求

本文链接：https://blog.csdn.net/jiangshangchunjiezi/article/details/76926967

版权

DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、需求：点击不同的颜色方框，让文本显示不同的颜色
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>