jQuery如何動態新增刪除CSS樣式？ （程式碼範例）
- 青灯夜游轉載
- 2019-11-28 15:15:042402瀏覽
jQuery動態追加和移除CSS樣式，有兩個CSS樣式操作方法，一個是追加樣式addClass，一個是移除樣式removeClass，下面透過一個實例來講解用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery动态添加删除CSS样式</title>
<script type="text/javascript" src="http://localhost/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function() {
$('#txtContent').addClass('red'); //追加样式
});
$("#btn2").click(function() {
$('#txtContent').removeClass('red'); //移除样式
});
$("#btn3").click(function() {
$('#txtContent').addClass('red weight family'); //追加多个样式
});
$("#btn4").click(function() {
$('#txtContent').removeClass('red weight'); //移除多个样式
});
$("#btn5").click(function() {
$('#txtContent').removeClass(); //移除所有样式
});
});
</script>
<style type="text/css">
.default {
font-size: 30px;
}
.red {
color: red;
}
.weight {
font-weight: bold;
}
.family {
font-family: "华文隶书"
}
</style>
</head>
<body>
<div id="txtContent">你好呀！jQuery基础知识！</div><br />
<input id="btn1" type="button" value="追加样式" />
<input id="btn2" type="button" value="移除样式" />
<input id="btn3" type="button" value="追加多个样式" />
<input id="btn4" type="button" value="移除多个样式" />
<input id="btn5" type="button" value="移除所有样式" />
</body>
</html>推薦學習： jQuery影片教學
以上是jQuery如何動態新增刪除CSS樣式？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除