Maison >interface Web >js tutoriel >Comment jQuery ajoute et supprime-t-il dynamiquement des styles CSS ? (exemple de code)
Comment jQuery ajoute et supprime-t-il dynamiquement des styles CSS ? (exemple de code)
- 青灯夜游avant
- 2019-11-28 15:15:042402parcourir
jQuery ajoute et supprime dynamiquement les styles CSS. Il existe deux méthodes d'opération de style CSS, l'une consiste à ajouter le style addClass et l'autre à supprimer le style removeClass. à travers un exemple ci-dessous.
<!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>Apprentissage recommandé : Tutoriel vidéo jQuery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer