第一种方法，className：

function fun1(){

   var test=document.getElementById("test");

   test.className+=" red";

}

第二种方法，.css()：

function fun2(){

   $("#test").css("background","red");

}

第三种方法，.attr()：

function fun3(){

   $("#test").attr("style","background:red");

}

第四种方法，cssText：(注意事项:用cssText批量修改样式)

function fun4(){

   var test=document.getElementById("test");

   test.style.cssText="background:red";

}

第五种方法，style：

function fun5(){

   var test=document.getElementById("test");

   test.style.background="red";

}

不同的方法适应不同的应用场景，大家根据需要采用最合适的方法.

完整代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style type="text/css">

.test{ width:100px; height:100px; background:#000}

.red{ background:red}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script type="text/javascript">

//第一种方法

function fun1(){

   var test=document.getElementById("test");

   test.className+=" red";

   }

//第二种方法

function fun2(){

   $("#test").css("background","red");

   }

//第三种方法

function fun3(){

   $("#test").attr("style","background:red");

   }

//第四种方法

function fun4(){

   var test=document.getElementById("test");

   test.style.cssText="background:red";

   }

//第五种方法

function fun5(){

   var test=document.getElementById("test");

   test.style.background="red";

   }

window.οnlοad=fun5;

</script>

</head>

<body>

<div id="test"></div>

</body>

</html>