<head>
<title></title>
<style type="text/css">
p{background-color:#eee;font-size:30px;}
.classadd{background-color:red; font-family:微软雅黑;}
.classadd1{font-weight:bold;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {//设置样式
$('p').css('background-color', 'blue');
})
$('#Button2').click(function () {//增加样式
$('p').addClass('classadd classadd1');
})
$('#Button3').click(function () {//删除样式
$('p').removeClass('classadd1');
})
$('#Button4').click(function () {//切换样式
$('p').toggleClass('classadd1');
})
})
</script>
</head>
<body>
<p>Hello Wold!</p>
<input id="Button1" type="button" value="设置样式" />
<input id="Button2" type="button" value="添加样式" />
<input id="Button3" type="button" value="删除样式" />
<input id="Button4" type="button" value="切换样式" />
</body>
效果图:第一张是园效果图
当我点击设置样式按钮时就可以看到第一张图片变为第二张图片(图片背景的变化)
当我单击添加样式时,变化如下:
当我单击删除样式按钮时,变化我们也卡伊清楚的看到,
当我点击切换样式按钮时,相对一第一张图片的变化我们可以看出来。