您的位置：首页 > Web前端 > JQuery

Jquery 设置添加删除切换样式

2013-04-18 20:53 369 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

p{background-color:#eee;font-size:30px;}

.classadd

{

font-weight:bold;font-family:@微软雅黑;font-size:40px;

}

.classadd1

{

background-color:Red;

}

</style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('#btnclass').click(function () {

$('p').css('background-color', 'Blue');

})

$('#btnAdd').click(function () {

$('p').addClass('classadd classadd1');

})

$('#btnRemove').click(function () {

//$('p').removeClass();

$('p').removeClass('classadd1'); //删除指定名称的样式

})

$('#btnChange').click(function () {

$('p').toggleClass('classadd1'); //删除指定名称的样式

})

})

</script>

</head>

<body>

<p class="classadd">得用汉字</p>

<input type="button" id="btnclass" value="设置样式"/>

<input type="button" id="btnAdd" value="添加样式"/>

<input type="button" id="btnRemove" value="删除样式"/>

<input type="button" id="btnChange" value="切换样式"/>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Jquery 设置 添加 删除 切换 样式

Jquery 设置添加删除切换样式