DOM操作CSS 1.第一种方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM操作CSS</title> <style style="text/css"> li{ font-size:2px; color:#ffffff; background-color:gray; border-radius:5px; height:33px; width:100px; text-align:center; line-height:38px; list-style:none; float:left; margin-right:10px; } </style> <script type="text/javascript"> function changeA(obj){ obj.style.color="yellow"; obj.style.fontSize="16px"; obj.style.backgroundColor="red"; } function changeB(obj){ obj.style.color="white"; obj.style.fontSize="12px"; obj.style.backgroundColor="gray"; } </script> </head> <body> <ul> <li onmouseover="changeA(this)" onmouseout="changeB(this)">前端</li> <li onmouseover="changeA(this)" onmouseout="changeB(this)">后端</li> <li onmouseover="changeA(this)" onmouseout="changeB(this)" >数据库</li> </ul> </body> </html>直接通过在按钮上添加事件，调用函数，实现效果。 注意函数参数问题，如调用时：changeA(this), 定义时：changeA(obj)
2.第二种方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM操作CSS</title> <style style="text/css"> li{ font-size:2px; color:#ffffff; background-color:gray; border-radius:5px; height:33px; width:100px; text-align:center; line-height:38px; list-style:none; float:left; margin-right:10px; } </style> <script type="text/javascript"> //页面加载完后，给所有li动态绑定over和out事件 window.onload=function(){ //获取所有li var liArr=document.getElementsByTagName("li"); for(var i=0;i<liArr.length;i++){ liArr[i].onmouseover=function(){ this.style.color="yellow"; this.style.fontSize="16px"; this.style.backgroundColor="red"; } liArr[i].onmouseout=function(){ this.style.color="white"; this.style.fontSize="12px"; this.style.backgroundColor="gray"; } } } </script> </head> <body> <ul> <li>前端</li> <li>后端</li> <li>数据库</li> </ul> </body> </html>通过js技术动态绑定事件，这样不用每个标签都写一次。
第三种方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM操作CSS</title> <style style="text/css"> li{ font-size:2px; color:#ffffff; background-color:gray; border-radius:5px; height:33px; width:100px; text-align:center; line-height:38px; list-style:none; float:left; margin-right:10px; } .over{ color:yellow; font-size:16px; background-color:red; } .out{ color:white; font-size:12px; background-color:gray; } </style> <script type="text/javascript"> //页面加载完后，给所有li动态绑定over和out事件 window.onload=function(){ //获取所有li var liArr=document.getElementsByTagName("li"); for(var i=0;i<liArr.length;i++){ liArr[i].onmouseover=function(){ //this.class="over";// 不是class 而是className this.className="over"; } liArr[i].onmouseout=function(){ this.className="out"; } } } </script> </head> <body> <ul> <li >前端</li> <li>后端</li> <li>数据库</li> </ul> </body> </html>不仅动态绑定事件，定义样式，改变样式都采用类定义的方法，这样可以增加代码的重用性。
注意点： js中的样式定义：
//对象调用时 this.style.color="yellow"; this.style.fontSize="16px"; this.style.backgroundColor="red"; //在标签中设置时 <div style="height:50px;width:50px;position:fixed;">css中的样式定义：
font-size:2px; color:#ffffff; background-color:gray; border-radius:5px; height:33px; width:100px; text-align:center; line-height:38px; list-style:none; float:left; margin-right:10px;