JavaScript操作CSS:Style的三种方式

年高洁
2023-12-01
  1.  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript操作CSS:Style</title>
        <style type="text/css">
        li{
            font-size: 12px;
            color: #ffffff;
            background-image: url(images/bg1.gif);
            background-repeat: no-repeat;
            height: 33px;
            width:104px;
            text-align: center;
            line-height:38px;
            list-style:none;
            float:left;
        }
        </style>
        <script>
            function changeBg1(currObj){
                //style="background-color:red" CSS  style属性  background-color css属性
                
                currObj.style.backgroundImage = "url(images/bg2.gif)"; // JavaScript style对象  backgroundImage 对象属性
                currObj.style.color="red";
                currObj.style.fontSize="15px";
            }
            
            function changeBg2(currObj){
                currObj.style.backgroundImage = "url(images/bg1.gif)";
                currObj.style.color="#ffffff";
                currObj.style.fontSize="12px";
            }
        </script>
        </head>
        
        <body>
           <ul>
            <li οnmοuseοver="changeBg1(this)" οnmοuseοut="changeBg2(this)"  style="background-color:red">资讯动态</li>
            <li  οnmοuseοver="changeBg1(this)" οnmοuseοut="changeBg2(this)">产品世界</li>
            <li  οnmοuseοver="changeBg1(this)" οnmοuseοut="changeBg2(this)">市场营销</li>
            
           </ul>
        </body>                                                                                                                                  最简单
  2. <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript操作CSS:Style</title>
        <style type="text/css">
        li{
            font-size: 12px;
            color: #ffffff;
            background-image: url(images/bg1.gif);
            background-repeat: no-repeat;
            height: 33px;
            width:104px;
            text-align: center;
            line-height:38px;
            list-style:none;
            float:left;
        }
        </style>
        <script>
            //页面load之后给所有的li绑定mouseover和mouseout事件
            window.onload = function(){
                //获取所有的li
                var liArr = document.getElementsByTagName("li");
                //通过循环给每个li绑定事件
                for(var i=0;i<liArr.length;i++){
                    //mouseover
                    liArr[i].onmouseover = function(){
                        this.style.backgroundImage = "url(images/bg2.gif)";
                        this.style.color = "yellow";
                        this.style.fontSize = "15px";
                    }
                    //mouseout
                    liArr[i].onmouseout = function(){
                        this.style.backgroundImage = "url(images/bg1.gif)";
                        this.style.color = "#ffffff";
                        this.style.fontSize = "12px";
                    }
                }
            }
        </script>
        </head>
        
        <body>
           <ul>
            <li>资讯动态</li>
            <li>产品世界</li>
            <li>市场营销</li>        
           </ul>
        </body>
  3. <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript操作CSS:Style</title>
        <style type="text/css">
        li{
            font-size: 12px;
            color: #ffffff;
            background-image: url(images/bg1.gif);
            background-repeat: no-repeat;
            height: 33px;
            width:104px;
            text-align: center;
            line-height:38px;
            list-style:none;
            float:left;
        }
        .over{
            background-image:url(images/bg2.gif);
            color:yellow;
            font-size:15px;
        }
        
        .out{
            font-size: 12px;
            color: #ffffff;
            background-image: url(images/bg1.gif);
        }
        </style>
        <script>
            //页面load之后给所有的li绑定mouseover和mouseout事件
            window.onload = function(){
                //获取所有的li
                var liArr = document.getElementsByTagName("li");
                //通过循环给每个li绑定事件
                for(var i=0;i<liArr.length;i++){
                    //mouseover
                    liArr[i].onmouseover = function(){
                        this.className = "over";
                    }
                    //mouseout
                    liArr[i].onmouseout = function(){
                        this.className ="out";                    
                    }
                }
            }
        </script>
        </head>
        
        <body>
           <ul>
            <li>资讯动态</li>
            <li>产品世界</li>
            <li>市场营销</li>        
           </ul>
        </body>

转载于:https://my.oschina.net/u/3347626/blog/902223

 类似资料: