动态效果如图所示:
第一种实现方法:
<!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>
时间: 2024-10-04 18:57:22