JQuery 样式操作

最新推荐文章于 2017-08-08 17:41:48 发布

永远爱好写程序

最新推荐文章于 2017-08-08 17:41:48 发布

阅读量807

点赞数

分类专栏： Jquery_高级

本文链接：https://blog.csdn.net/limlimlim/article/details/9240003

版权

Jquery_高级专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

<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>

永远爱好写程序

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 样式操作

样式操作追加样式: addClass() 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它. 判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class
复制链接

扫一扫

专栏目录