jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作⽅法，⼀个是追加样式addClass，⼀个是移除样式removeClass，下⾯通过⼀个⼩例⼦讲解⽤法。jQuery动态追加移除CSS样式
<!DOCTYPE html>
<html lang="en">
<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="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'); //移除样式
});
jquery选择器和css选择器的区别$("#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" class="default">你好呀！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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。