Class相关基础示例[1002]
一、开解：
我们先看一下运行效果。
这里注意一下，第三个按钮是切换按钮，样式有则删除，无则添加。
二、实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.bt1{font-size: 30pt;}
.bt2{font-size: 8pt;}
.bt3{background: blue;}
.bt4{color: red;}
</style>
</head>
<body>
<div id="fontset">方块网页</div>
<button id="bt1">字变大</button>
<button id="bt2">字变小</button>
<button id="bt3">背景色</button>
<button id="bt4">字变红色</button>
<button id="bt5">去掉红色</button>
<button id="bt6">恢复原样</button>
</body>
<script type="text/javascript">
//这里是取得各个按钮元素节点
var $bt1 = $("#bt1");
var $bt2 = $("#bt2");
var $bt3 = $("#bt3");
var $bt4 = $("#bt4");
var $bt5 = $("#bt5");
var $bt6 = $("#bt6");
var $dfont = $("#fontset");
$bt1.click(function () {
$dfont.attr("class","bt1");//设置样式
});
$bt2.click(function () {
$dfont.attr("class","bt2");//设置样式
});
$bt3.click(function () {
$dfont.toggleClass("bt3");//切换样式
});
$bt4.click(function () {
$dfont.addClass("bt4");//添加样式
});
$bt5.click(function () {
$dfont.removeClass("bt4");//删除样式
});
$bt6.click(function () {
$dfont.attr("class","");//设置样式为空
});
</script>
</html>
运行结果：
三、总结：
javascript原生样式操作在[0601]讲解，jQuery的样式相关操作在[0503]。
四、关注：
更多内容请关注我们的公众号：