<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript 简单的改变样式的方法</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> *{ padding:0; margin:0} body{overflow: hidden;} .wrap{position: relative;width: 300px;height: 200px;margin: 30px auto;overflow: hidden;} .wrap .btn {position: absolute;z-index: 10;right: 10px;bottom: 10px} .wrap .btn li{list-style: none;height: 10px;width: 10px;border-radius: 5px;background: #000;margin: 0 5px;float: left;} .wrap .btn li.on{background: #fff} .wrap .con li{ float: left;width: 300px;height: 200px;position: relative; list-style: none;line-height: 200px;font-size: 50px;text-align:center;color: #fff} .wrap ul{width: 1500px} .next{position: absolute;font-size: 10px;left: 10px;top: 10px;cursor: pointer;border: 1px #ccc solid} .next2{position: absolute;font-size: 10px;left: 50px;top: 10px;cursor: pointer;border: 1px #ccc solid} </style> </head> <body> <div class="wrap" id="box"> <ul class="con" > <li style="background:red" class="en">1</li> </ul> <div class="next" id="change">改样式</div> <div class="next2" id="change_2">改样式2</div> </div> <script type="text/javascript"> /* times : 2013 - 7 - 12 ; form : enen */ /*简单的改变样式的方法*/ var oBtn = document.getElementById("change"); var oBtn_2 = document.getElementById("change_2"); var box = document.getElementById("box").getElementsByTagName("li")[0]; oBtn.onclick = function(){ box.style.backgroundColor = "blue"; box.style.color = "#ccc"; }; /*要是改变的属性太多了。那代码就太多了。下面有个更简洁的方法改变样式,定义一个函数*/ function setCss(ele,attr,value){ switch (arguments.length) { case 2: if(typeof arguments[1] == "object") { //二个参数, 如果第二个参数是对象, 批量设置属性 for (var i in attr)ele.style[i] = attr[i] } else { //二个参数, 如果第二个参数是字符串, 读取属性值 return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele, null)[attr] } break; case 3: //三个参数, 单一设置属性 ele.style[attr] = value; break; default: alert("参数错误！") } } oBtn_2.onclick = function(){ setCss(box,{"background-color":"yellow","color":"#000"}) } </script> </body> </html>