js简单列子

 <!--css样式-->
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

 <!--body部分-->

 <input type="button" value="变宽" οnclick="setStyel('width','400px')">
    <input type="button" value="变高" οnclick="setStyel('height','400px')">
    <input type="button" value="变绿" οnclick="setStyel('background','green')">
    <div id="div1">

    </div>

  

 <!--js部分-->

<script type="text/javascript">
        function setStyel(name,value){
            var oDiv = document.getElementById("div1");
            oDiv.style[name]=value;
        }
    </script>

 <!--css样式-->

 <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            border: solid 1px black;
            float: left;
            margin: 10px;
        }
    </style>

  

 <!--body部分-->

<div></div>
    <div></div>
    <div></div>
    <div></div>

 <!--js部分-->

<script type="text/javascript">
        var oDiv = document.getElementsByTagName("div");
         for(var i=0;i<oDiv.length;i++){
             oDiv[i].style.background="red";
         }
    </script>

 <!--全选反选-->

 <!--body部分-->

<input id="btn1" type="button" value="全选"><br/>
<input id="btn2" type="button" value="不选"><br/>
<input id="btn3" type="button" value="反选"><br/>
<div id="div1">
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox"><br/>
    <input type="checkbox">
 

 <!--js部分-->

   <script type="text/javascript">
        var oBtn1 = document.getElementById("btn1");
        var oBtn2 = document.getElementById("btn2");
        var oBtn3 = document.getElementById("btn3");
        var oDiv = document.getElementById("div1");
        var oCh = oDiv.getElementsByTagName("input");
         oBtn1.onclick = function(){
             for(var i=0;i<oCh.length;i++){
                 oCh[i].checked=true;
             }
         };
        oBtn2.onclick = function(){
            for(var i=0;i<oCh.length;i++){
                oCh[i].checked=false;
            }
        };
        oBtn3.onclick = function(){
            for(var i=0;i<oCh.length;i++){
                if(oCh[i].checked==true){
                    oCh[i].checked=false;
                }else{
                    oCh[i].checked=true;
                }
            }
        }
    </script>

<!--下拉列表-->

<!--css样式-->

 <style type="text/css">
        #div1 .active{
            background-color: yellow;
        }
        #div1 div{
            width: 200px;
            height: 200px;
            background-color: #cccccc;
            border: solid 1px #999;
            display: none;
        }
    </style>

<!--body部分-->

 <div id="div1">
    <input class="active" type="button" value="教育">
    <input type="button" value="培训">
    <input type="button" value="招生">
    <input type="button" value="出国">

    <div>1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>
    </div>
  

<!--js部分-->

<script type="text/javascript">
        var oDiv = document.getElementById("div1");
        var oBtn = oDiv.getElementsByTagName("input");
        var aDiv = oDiv.getElementsByTagName("div");

        for(var i=0;i<oBtn.length;i++){
            oBtn[i].index=i;
            oBtn[i].onclick = function(){
                for(var i=0;i<oBtn.length;i++){
                    oBtn[i].className="";
                    aDiv[i].style.display="none";
                }
                this.className="active";
                aDiv[this.index].style.display="block";
            }
        }
    </script>

转载于:https://my.oschina.net/u/1431265/blog/225249