一些简单的js效果

<!--鼠标效果-->

 <!--css样式部分-->

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

        }
    </style>

 <!--body部分-->

 <div id="div1" οnmοusemοve="a()" οnmοuseοut="b()"> </div>

 <!--js部分-->

 <script type="text/javascript">
           var Div = document.getElementById("div1");
           var Div1 = document.getElementById("div1");
           function a(){
               Div.style.width="300px";
               Div.style.height="300px";
               Div.style.background="green";
           }
           function b(){
               Div1.style.width="200px";
               Div1.style.height="200px";
               Div1.style.background="red";
           }


       </script>

         <!--改变link的href-->

        <link id="L1" rel="stylesheet" href="css/style.css"/>

      <!--css样式部分-->

    <!--css/style.css-->

        body{
                background: red;
                }

    <!--css/style1.css-->

    body{
    background: yellow;
}

        <!--body部分-->

         <input type="button" value="皮肤1" οnclick="skin1()">
        <input type="button" value="皮肤2" οnclick="skin2()">

      <!--js部分-->

       <script type="text/javascript">
           var L1 = document.getElementById("L1");
           function skin1(){
               L1.href ="css/style.css";
           }
           function skin2(){
               L1.href ="css/style1.css";
           }
       </script>

 <!--修改文本框文字-->

 <!--body部分-->

       <input id="oTx" type="text"/>
       <input type="button" value="改文字" οnclick="oTxet()"/>

 <!--js部分-->

 <script type="text/javascript">
           var oTx = document.getElementById("oTx");
           function oTxet(){
               oTx.value="abcdef";
           }
       </script>

 <!--显示隐藏-->

 <!--body部分-->

 <input type="button" value="显示隐藏" οnclick="xin()">
    <div id="div1">

    </div>

<!--js部分-->

 <script type="text/javascript">

           function xin(){
               var div = document.getElementById("div1");
               if(div.style.display=="block"){
                   div.style.display="none";
               }else{
                   div.style.display="block";
               }
           }
       </script>

 <!--函数传参列子-->

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

   <!--body部分-->

 <input type="button" value="变绿" οnclick="setColor('green');" >
       <input type="button" value="变黄" οnclick="setColor('yellow');" >
       <input type="button" value="变黑" οnclick="setColor('black');" >
       <div id="div1">

       </div>

<!--js部分-->

 <script type="text/javascript">
           function setColor(color){
                var oDiv = document.getElementById("div1");
               oDiv.style.background=color;
           }
       </script>

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