Class相关基础示例[1002]

最新推荐文章于 2025-07-01 11:59:23 发布

原创最新推荐文章于 2025-07-01 11:59:23 发布 · 602 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

javascript 同时被 3 个专栏收录

15 篇文章

订阅专栏

jquery

7 篇文章

订阅专栏

1002

1 篇文章

订阅专栏

本文通过实例详细介绍了如何使用jQuery进行元素样式的添加、删除及切换，包括字体大小、颜色和背景色的修改。

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>