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

来源：互联网发布：最新备案域名查询编辑：程序博客网时间：2024/06/05 00:46

简单描述演示内容：
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>

阅读全文

1 0