<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>样式操作</title>
<!--获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
追加样式: addClass()
移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false-->
<style type="text/css">
div{width:800px;margin:auto;border:1px solid green;margin-top:30px;padding:10px;}
#control{text-align:center;}
.red{background-color:Red;}
.myfont{font-size:36px;color:White;}
</style>
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/ /改变颜色
$("#btnChangeColor").click(function () {
//方法一 此方法设置后会覆盖原来的class类选择器
//$("#main").attr("class", "red");
//方法二 此方法会在原来的class属性中追加
$("#main").addClass("red");
});
//改变字体
$("#btnChangeFont").click(function () {
$("#main").addClass("myfont");
});
//还原颜色
$("#btnColorHy").click(function () {
$("#main").removeClass("red");
});
//还原字体
$("#btnFontHy").click(function () {
$("#main").removeClass("myfont");
});
//颜色切换
$("#btnToggleColor").click(function () {
$("#main").toggleClass("red");
});
//字体切换
$("#ButbtnToggleFont").click(function () {
$("#main").toggleClass("myfont");
});
});
</script>
</head>
<body>
<div id="control">
<input id="btnChangeColor" type="button" value="变色" />
<input id="btnChangeFont" type="button" value="字体变大" />
<input id="btnColorHy" type="button" value="颜色还原" />
<input id="btnFontHy" type="button" value="字体还原" />
<input id="btnToggleColor" type="button" value="颜色切换" />
<input id="ButbtnToggleFont" type="button" value="字体切换" />
</div>
<div id="main">
获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.<br />
追加样式: addClass() <br />
移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class<br />
切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.<br />
判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>样式操作</title>
<!--获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
追加样式: addClass()
移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false-->
<style type="text/css">
div{width:800px;margin:auto;border:1px solid green;margin-top:30px;padding:10px;}
#control{text-align:center;}
.red{background-color:Red;}
.myfont{font-size:36px;color:White;}
</style>
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/ /改变颜色
$("#btnChangeColor").click(function () {
//方法一 此方法设置后会覆盖原来的class类选择器
//$("#main").attr("class", "red");
//方法二 此方法会在原来的class属性中追加
$("#main").addClass("red");
});
//改变字体
$("#btnChangeFont").click(function () {
$("#main").addClass("myfont");
});
//还原颜色
$("#btnColorHy").click(function () {
$("#main").removeClass("red");
});
//还原字体
$("#btnFontHy").click(function () {
$("#main").removeClass("myfont");
});
//颜色切换
$("#btnToggleColor").click(function () {
$("#main").toggleClass("red");
});
//字体切换
$("#ButbtnToggleFont").click(function () {
$("#main").toggleClass("myfont");
});
});
</script>
</head>
<body>
<div id="control">
<input id="btnChangeColor" type="button" value="变色" />
<input id="btnChangeFont" type="button" value="字体变大" />
<input id="btnColorHy" type="button" value="颜色还原" />
<input id="btnFontHy" type="button" value="字体还原" />
<input id="btnToggleColor" type="button" value="颜色切换" />
<input id="ButbtnToggleFont" type="button" value="字体切换" />
</div>
<div id="main">
获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.<br />
追加样式: addClass() <br />
移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class<br />
切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.<br />
判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
</div>
</body>
</html>