第3章　「クラスの追加と削除を行なう」

jQueryでスタイルシートの追加を行なうにはaddClass()メソッドを使います。パラメータには追加したいスタイルシートクラスを指定します。すでに、同名のクラスが存在する場合には追加処理は行なわれません。 サンプル1はpタグにnoteクラスを追加します。
追加したスタイルシートクラスまたは既存のスタイルシートクラスを削除するにはremoveClass()を使います。削除するクラスが存在しない場合でも特にエラーにはなりません。また、複数のスタイルシートクラスがある場合には該当するスタイルシートクラスのみ削除されます。
サンプル2ではpタグからnoteクラスのみ削除します。（サンプル1を実行する）（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQueryとは？</p>
<p>軽量／高速なライブラリです</p>
<form>
<input type="button" value="書き替え" onClick="changeCSS()">
</form>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
.note {
color:red;
font-size:16pt;
font-weight:900;
}


【JavaScript】
function changeCSS(){
$("p").addClass("note");
}


【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p class="note">jQueryとは？</p>
<p class="note content">軽量／高速なライブラリです</p>
<form>
<input type="button" value="CSSクラス削除" onClick="removeCSS()">
</form>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
.note {
color:red;
font-size:16pt;
font-weight:900;
}
.content {
background-color:#ddd;
}


【JavaScript】
function removeCSS(){
$("p").removeClass("note");
}

[目次へ]