<!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>