DHTML技术演示---动态设置页面文字样式

最新推荐文章于 2023-07-26 10:23:06 发布

海那边的小萌男

最新推荐文章于 2023-07-26 10:23:06 发布

阅读量640

点赞数 1

分类专栏： J2EE 文章标签：技术 dhtml class

本文链接：https://blog.youkuaiyun.com/weixin_37720904/article/details/72178180

版权

J2EE 专栏收录该内容

69 篇文章

订阅专栏

简单描述演示内容：
1.页面内又三个颜色快，和文字，当你点击颜色，文字的颜色会改变，变成和所点击的颜色相同
2.会有下拉框，里面有颜色选项，选择什么颜色，文字就以该颜色显示
3.同二类似，但是下拉显示加上了演示
这里写图片描述 `

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>选颜色</title>
        <style type="text/css">
            .clscolor{
                width: 150px;
                height: 150px;
                margin-right: 20px;
                margin-bottom: 20px;
                float: left;
            }
            #text1{
                clear: left;
                font-size: 18pt;
                f
            }
        </style>
        <script type="text/javascript">
            function changeC(odivNode){
                var c = odivNode.style.backgroundColor;
                var otextNode = document.getElementById("text1");
                otextNode.style.color=c;
            }

        </script>
    </head>
    <body>
        <div>
            <div class="clscolor" id="color1" style="background-color: #cc66ff" onclick="changeC(this)"></div>
            <div class="clscolor" id="color2" style="background-color: #33cc00" onclick="changeC(this)"></div>
            <div class="clscolor" id="color3" style="background-color: #003300" onclick="changeC(this)"></div>
        </div>
        <div id="text1"> 
            h湖南城市学院<br/>
            湖南城市学院<br/>
            湖南城市学院<br/>
            湖南城市学院<br/>
        </div>
        <hr>
        <!--onchange事件只有在选项值有变化时才会触发，而onclick事件在每次点击时都会触发  -->
        <select name="selcolor" onchange="changerC2(this)">
            <option value="black">--选择颜色--</option>
            <option value="red">红色</option>
            <option value="green">绿色</option>
            <option value="blue">蓝色</option>
        </select>
        <script type="text/javascript">
           function changerC2(oSelectNode){
              //alert("aa");
              /*附加知识点:获取下拦菜单(下栏框)中的所有选项
                  var oCollOptions = oSelectNode.options;
                  for(var i=0;i<oCollOptions.length;i++){
                     //alert( oCollOptions[i].value );//value属性
                     alert( oCollOptions[i].innerHTML );//文本内容
                  }
              */
              var idx = oSelectNode.selectedIndex;//当前用户选中选项的序号
           //  alert( oSelectNode.options[idx].innerHTML );
              var c= oSelectNode.options[idx].value;
                 document.getElementById("text1").style.color=c;
           }
        </script>
        <hr>
        <select id="sel3" name="selColor2" onchange="changeColor3(this)">
            <option value="black">--选择颜色--</option>
            <option style="background-color:red" value="red">红色</option>
            <option style="background-color:green" value="green">绿色</option>
            <option style="background-color:blue" value="blue">蓝色</option>
        </select>
        <script type="text/javascript">
           function changeColor3(oSelectNode){
              var idx = oSelectNode.selectedIndex;//当前用户选中选项的序号
              var c= oSelectNode.options[idx].style.backgroundColor;
              document.getElementById("text1").style.color=c;
           }
        </script>
    </body>
</html>