通过JS操作CSS | 种实现方法

动态效果如图所示：通过JS操作CSS-LMLPHP

第一种实现方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <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 type="text/javascript">

        function changeBg1(currObj){

            //style="background-image:url(images/bg2.gif)"

            //CSS  style属性 background-image属性

            currObj.style.backgroundImage="url(images/bg2.gif)";

            //JavaScript style对象  backgroundImage对象

            currObj.style.color="yellow";

            currObj.style.fontSize="20px"

        }

        function changeBg2(currObj){

            currObj.style.backgroundImage="url(images/bg1.gif)";

            currObj.style.color="#ffffff";

            currObj.style.fontSize="12px"

        }

    </script>

    </head>

    <body>

       <ul>

        <li onmouseover="changeBg1(this)" onmouseout="changeBg2(this)" style="background-image:url(images/bg2.gif)">资讯动态</li>

        <li  onmouseover="changeBg1(this)" onmouseout="changeBg2(this)">产品世界</li>

        <li onmouseover="changeBg1(this)" onmouseout="changeBg2(this)">市场营销</li>

       </ul>

    </body>

</html>

第二种实现方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <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 type="text/javascript">
        //匿名函数
        //页面加载完调用
        window.onload = function(){
            var liArr = document.getElementsByTagName("li");
            for(var i=0; i<liArr.length; i++){
                //动态绑定事件
                liArr.item(i).onmouseover = function(){
                    this.style.backgroundImage = "url(images/bg2.gif)";
                    this.style.color = "yellow";
                    this.style.fontSize = "20px";
                }
                liArr.item(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>
</html>

第三种实现方法：（推荐）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <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:20px;

    }

    .out{

         background-image:url(images/bg1.gif);

        color:#ffffff;

        font-size:12px;

     }

    </style>

    <script type="text/javascript">

        //通过js操作css

        window.onload = function(){

            var liArr = document.getElementsByTagName("li");

            for(var i=0; i<liArr.length; i++){

                //动态绑定事件

                liArr.item(i).onmouseover = function(){

                    this.className = "over";

                }

                liArr.item(i).onmouseout = function(){

                    this.className = "out";

                }

            }

        }

    </script>

    </head>

    <body>

       <ul>

        <li class="">资讯动态</li>

        <li>产品世界</li>

        <li>市场营销</li>

       </ul>

    </body>

</html>