JavaScript操作CSS:Style的三种方式

年高洁

2023-12-01

<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>                                                                                                                                  最简单
<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>
<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

JavaScript操作CSS:Style的三种方式

相关阅读

相关文章

相关问答

相关文档