Heim >Web-Frontend >js-Tutorial >Wie fügt jQuery CSS-Stile dynamisch hinzu und löscht sie? (Codebeispiel)
Wie fügt jQuery CSS-Stile dynamisch hinzu und löscht sie? (Codebeispiel)
- 青灯夜游nach vorne
- 2019-11-28 15:15:042445Durchsuche
jQuery fügt CSS-Stile dynamisch hinzu und entfernt sie. Es gibt zwei CSS-Stiloperationsmethoden: Eine dient zum Anhängen des Stils addClass und die andere zum Entfernen des Stils „removeClass“. anhand eines Beispiels unten.
<!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>Empfohlenes Lernen: jQuery-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWie fügt jQuery CSS-Stile dynamisch hinzu und löscht sie? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen