<1>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>
<style type="text/css">
.class1{ color:Red}
.class2{ font-size:100px}
</style>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () { //当点击#btn1的时候给#div1添加一个class2的样式
$("#div1").addClass("class2")
})
})
$(function () {
$("#btn2").click(function () {
$("#div1").removeClass("class1") //当点击#btn2的时候移除#div1中的class1的样式
})
})
$(function () {
$("#btn3").click(function () {
$("#div1").toggleClass("class2") //当点击#btn2的时候就将原来的样式切换到class2样式，再点击#btn2的时候就在class2样式切换到原来的样式
})
})
$("textarea").attr("class", "class1") //将textarea的样式添加一个 class1 样式
$("textarea").attr("class", "class1 class2") //给textarea添加两个样式一个是class1样式，另外一个是class2样式
</script>
</head>
<body style=" background:red">
<div class="class1" id="div1">我是div</div>
<input type="button" value="添加样式"id="btn1" />
<input type="button" value="移除样式"id="btn2" />
<input type="button" value="切换样式"id="btn3" />
<textarea rows="5" cols="10">我是textarea</textarea>
</body>
</html>class 样式的添加,删除，切换,布布扣,bubuko.com
原文：http://blog.csdn.net/fanbin168/article/details/38275103