通过JS操作CSS

Posted 清风追梦enjoy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过JS操作CSS相关的知识，希望对你有一定的参考价值。

动态效果如图所示：

第一种实现方法：

<!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>

 

以上是关于通过JS操作CSS的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

音乐播放制作(html css js)